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