Responsive navbar collapse in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What happens when the navbar toggle button is clicked on a small screen?

Given this Bootstrap navbar code, what is the visible result after clicking the toggle button on a narrow screen?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

A The menu items slide down and become visible below the toggle button.

B The navbar disappears completely from the screen.

C Nothing changes; the menu items remain hidden.

D The toggle button changes color but the menu stays hidden.

💡 Hint

Think about what the 'collapse' class does when toggled.

On small screens, the navbar menu is hidden inside a collapsible container. Clicking the toggle button expands this container, showing the menu items below the button.

❓ selector

intermediate

Which Bootstrap class controls when the navbar expands?

In the class attribute 'navbar-expand-lg', what does 'lg' specify?

A 'lg' means the navbar expands only on small screens (<576px).

B 'lg' means the navbar is always expanded regardless of screen size.

C 'lg' means the navbar expands on large screens and above (≥992px).

D 'lg' means the navbar never expands and is always collapsed.

💡 Hint

Bootstrap uses size abbreviations like sm, md, lg, xl to control responsiveness.

'lg' stands for large screens in Bootstrap's grid system. The navbar expands (shows menu horizontally) on screens 992px wide or larger.

🧠 Conceptual

advanced

Why is the aria-expanded attribute important on the navbar toggle button?

What role does aria-expanded="false" play in the toggle button for accessibility?

A It tells screen readers whether the menu is currently visible or hidden.

B It changes the button color when clicked.

C It disables the toggle button when the menu is open.

D It automatically closes the menu after 5 seconds.

💡 Hint

Think about how screen readers understand interactive elements.

The aria-expanded attribute informs assistive technologies if the collapsible menu is open (true) or closed (false), improving navigation for users relying on screen readers.

📝 Syntax

advanced

What error occurs if the data-bs-target attribute is missing on the toggle button?

Consider this toggle button missing data-bs-target. What happens when clicked?

Bootsrap

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

A A JavaScript error is thrown in the console.

B Clicking the button does nothing; the menu does not collapse or expand.

C The page reloads unexpectedly.

D The menu expands but with broken styling.

💡 Hint

The toggle button needs to know which element to control.

Without data-bs-target, Bootstrap's JavaScript does not know which element to show or hide, so clicking the button has no effect.

❓ layout

expert

How to ensure the navbar toggle button is keyboard accessible?

Which practice makes the toggle button fully accessible via keyboard navigation?

A Use a <span> with a click event and no tabindex.

B Use a <div> with onclick and tabindex="-1".

C Use an <a> tag without href but with role="button".

D Use a <button> element with aria-label and ensure it is focusable.

💡 Hint

Think about semantic HTML and keyboard focus.

A

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