Responsive navbar collapse in Bootsrap - Mini Project: Build & Apply

Responsive Navbar Collapse with Bootstrap

📖 Scenario: You are building a website header that works well on both big screens and small phones. You want a navigation bar that shows menu links horizontally on large screens but collapses into a toggle button on small screens. This toggle button will open and close the menu for easy access on mobile devices.

🎯 Goal: Create a responsive navigation bar using Bootstrap 5 that collapses into a toggle button on small screens and expands on larger screens. The navbar should have a brand name and three navigation links.

📋 What You'll Learn

Use Bootstrap 5 classes for the navbar

Include a brand name inside the navbar

Add three navigation links: Home, About, Contact

Make the navbar collapse into a toggle button on small screens

Ensure the toggle button controls the menu visibility

Use semantic HTML and accessible attributes

💡 Why This Matters

🌍 Real World

Responsive navigation bars are essential for websites to work well on all devices, from phones to desktops. This project shows how to use Bootstrap to create a navbar that adapts automatically.

💼 Career

Knowing how to build responsive navigation is a key skill for front-end web developers. Bootstrap is widely used in industry for fast, accessible UI development.

1

Create the basic navbar structure

Write the HTML code to create a <nav> element with the Bootstrap classes navbar and navbar-expand-lg. Inside it, add a <div> with class container-fluid. Inside this container, add a brand link with class navbar-brand and text MySite. Also add an unordered list <ul> with class navbar-nav containing three list items <li> each with class nav-item. Each list item should have a link <a> with class nav-link and text Home, About, and Contact respectively.

Bootsrap

Hint

Start by creating a <nav> with classes navbar navbar-expand-lg. Then add a container <div> with class container-fluid. Inside, add the brand link and the navigation list with three links.

2

Add the navbar toggler button

Below the brand link, add a button element with class navbar-toggler, type button, and these attributes: data-bs-toggle="collapse", data-bs-target="#navbarSupportedContent", aria-controls="navbarSupportedContent", aria-expanded="false", and aria-label="Toggle navigation". Inside the button, add a <span> with class navbar-toggler-icon.

Bootsrap

  
    MySite
    
    
      
        Home
      
      
        About
      
      
        Contact
      
    
  

Hint

Add a button with class navbar-toggler and the required Bootstrap data attributes for toggling the collapse. Inside the button, add a <span> with class navbar-toggler-icon.

3

Wrap the navigation links in a collapsible container

Wrap the <ul> with class navbar-nav inside a <div> with classes collapse navbar-collapse and id navbarSupportedContent. This container will collapse and expand when the toggler button is clicked.

Bootsrap

  
    MySite
    
      
    
    
  

Hint

Wrap the <ul> inside a <div> with classes collapse navbar-collapse and id navbarSupportedContent. This makes the menu collapsible.

4

Add Bootstrap CSS and JS links for functionality

Add the Bootstrap 5 CSS link inside the <head> section and the Bootstrap 5 JavaScript bundle script before the closing </body> tag. Use the official Bootstrap CDN URLs: CSS link href https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css with rel="stylesheet", and JS script src https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js. Also add the required <!DOCTYPE html>, <html lang="en">, <meta charset="UTF-8">, and viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head>.

Bootsrap

  
  
  Responsive Navbar


  
    
      MySite
      
        
      
      
        
          
            Home
          
          
            About
          
          
            Contact
          
        
      
    
  
  

Hint

Wrap your navbar in a full HTML document. Add the required meta tags in the <head>. Include the Bootstrap CSS link in the <head> and the Bootstrap JS bundle script before the closing </body> tag.

Practice

1. What is the main purpose of the navbar-toggler button in a Bootstrap responsive navbar?

easy

A. To change the navbar color

B. To show or hide the navigation menu on small screens

C. To add a logo to the navbar

D. To make the navbar fixed at the top

Solution

1. Step 1: Understand the role of navbar-toggler

   The navbar-toggler button is designed to toggle (show/hide) the navigation links when the screen is small.

2. Step 2: Connect to responsive behavior

   On small screens, the menu collapses and the toggler button controls its visibility.

3. Final Answer:

   To show or hide the navigation menu on small screens -> Option B

4. Quick Check:

   Navbar toggler = show/hide menu [OK]

Hint: Toggler button controls menu visibility on small screens [OK]

Common Mistakes:

• Thinking it changes navbar color
• Confusing it with logo placement
• Assuming it fixes navbar position

2. Which of the following is the correct Bootstrap class combination to make the navbar links collapsible?

easy

A. navbar-collapse

B. navbar-toggler collapse

C. collapse navbar-collapse

D. navbar-expand collapse

Solution

1. Step 1: Identify the correct class order

   Bootstrap requires the classes collapse and navbar-collapse together to make the menu collapsible.

2. Step 2: Confirm the required classes

   The combination collapse navbar-collapse provides both the collapse functionality and navbar styling.

3. Final Answer:

   <div class='collapse navbar-collapse'> -> Option C

4. Quick Check:

   Collapse + navbar-collapse = collapsible menu [OK]

Hint: Use 'collapse navbar-collapse' exactly for collapsible menu [OK]

Common Mistakes:

• Missing the collapse class
• Using 'navbar-toggler' instead
• Mixing 'navbar-expand' with collapse

3. Given this HTML snippet, what happens when the screen width is small and the toggler button is clicked?

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navMenu">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    </ul>
  </div>
</nav>

medium

A. The menu items are always visible regardless of screen size

B. The navbar changes color

C. Nothing happens because the button is missing an ID

D. The menu items appear or disappear when the toggler is clicked

Solution

1. Step 1: Understand the toggler and collapse connection

   The button toggles the element with ID navMenu which has classes collapse navbar-collapse.

2. Step 2: Behavior on small screens

   On small screens, the menu is hidden by default and appears when the toggler is clicked, then hides again on next click.

3. Final Answer:

   The menu items appear or disappear when the toggler is clicked -> Option D

4. Quick Check:

   Toggler click = toggle menu visibility [OK]

Hint: Toggler button toggles menu visibility on small screens [OK]

Common Mistakes:

• Thinking button needs an ID instead of data-bs-target
• Assuming color changes on toggle
• Believing menu is always visible

4. What is wrong with this navbar code that prevents the collapse from working?

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="menu">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
    </ul>
  </div>
</nav>

medium

A. The attributes should be data-bs-toggle and data-bs-target instead of data-toggle and data-target

B. The button is missing the class navbar-collapse

C. The div should have class navbar-toggler instead of collapse

D. The id attribute on the div is missing

Solution

1. Step 1: Check Bootstrap 5 attribute naming

   Bootstrap 5 uses data-bs-toggle and data-bs-target instead of data-toggle and data-target.

2. Step 2: Identify impact on collapse functionality

   Using old attribute names prevents the toggler from controlling the collapse behavior.

3. Final Answer:

   Use data-bs-toggle and data-bs-target attributes -> Option A

4. Quick Check:

   Bootstrap 5 uses data-bs-* attributes [OK]

Hint: Use data-bs-toggle and data-bs-target for Bootstrap 5 [OK]

Common Mistakes:

• Using old Bootstrap 4 attribute names
• Adding wrong classes to button or div
• Missing id attribute on collapse div

5. You want a navbar that collapses on medium screens and smaller, but stays expanded on large screens and above. Which class should you use on the <nav> element to achieve this?

hard

A. navbar-expand-lg

B. navbar-expand-md

C. navbar-expand-sm

D. navbar-expand-xl

Solution

1. Step 1: Understand Bootstrap expand classes

   The class navbar-expand-lg means the navbar is expanded from large screens (992px) and larger, and collapses below large (medium and smaller).

2. Step 2: Match requirement to class

   Collapses on medium (768px) and smaller, expands on large and above: navbar-expand-lg.

3. Final Answer:

   navbar-expand-lg -> Option A

4. Quick Check:

   Expand from lg up means collapse md and below [OK]

Hint: Use navbar-expand-lg to collapse on medium and smaller [OK]

Common Mistakes:

• Choosing navbar-expand-md which expands from medium (too early)
• Using navbar-expand-sm which expands too early
• Confusing xl with lg breakpoints