Navbar basics in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap navbar code?

Look at the following Bootstrap navbar code. What will you see when this code runs in a browser?

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 Only the brand name is visible, and the links are always hidden with no toggle button.

B A vertical sidebar with the brand name at the top and three links stacked below it.

C A horizontal navbar with a brand name on the left and three links: Home (highlighted), Features, and Pricing. On small screens, the links collapse behind a toggle button.

D A footer bar with the brand name centered and links aligned to the right.

💡 Hint

Think about how Bootstrap's navbar-expand-lg and collapse classes work for responsiveness.

The code creates a responsive horizontal navbar with a brand on the left and three links. The 'navbar-expand-lg' class means the links show horizontally on large screens but collapse behind a toggle button on smaller screens. The 'active' class highlights the Home link.

❓ selector

intermediate

Which CSS selector targets only the active link in this Bootstrap navbar?

Given a Bootstrap navbar where the active link has class 'nav-link active', which CSS selector will style only the active link?

A .nav-link:focus

B .nav-item .nav-link

C .navbar-nav > li > a

D .nav-link.active

💡 Hint

Look for the selector that matches both classes on the same element.

The selector '.nav-link.active' matches elements with both classes 'nav-link' and 'active'. This targets only the active link. Other selectors either target all links or links on focus.

🧠 Conceptual

advanced

What ARIA attribute improves accessibility for the navbar toggle button?

In a Bootstrap navbar, the toggle button controls showing and hiding the menu on small screens. Which ARIA attribute on the button helps screen readers understand this behavior?

A aria-expanded

B aria-hidden

C aria-label

D aria-pressed

💡 Hint

This attribute indicates if the menu is currently open or closed.

The 'aria-expanded' attribute on the toggle button tells assistive technologies whether the collapsible menu is expanded (true) or collapsed (false). This improves navigation for users relying on screen readers.

❓ layout

advanced

How does the 'navbar-expand-lg' class affect the navbar layout?

What effect does adding the class 'navbar-expand-lg' have on a Bootstrap navbar's layout?

A The navbar links are horizontal on large screens and collapse into a toggle menu on smaller screens.

B The navbar is always vertical regardless of screen size.

C The navbar links are hidden on large screens and visible only on small screens.

D The navbar links are always visible and never collapse.

💡 Hint

Think about how 'expand-lg' controls responsiveness at the large breakpoint.

'navbar-expand-lg' means the navbar expands horizontally on large (lg) screens and above. On smaller screens, the links collapse behind a toggle button to save space.

📝 Syntax

expert

What error occurs if the toggle button's data-bs-target does not match the collapse div's id?

In this Bootstrap navbar, the toggle button has data-bs-target="#menu" but the collapse div has id="navbarNav". What happens when you click the toggle button?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" aria-controls="menu" 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" href="#">Link</a></li>
    </ul>
  </div>
</nav>

A The menu opens and closes normally without issues.

B Clicking the toggle button does nothing; the menu does not open or close.

C A JavaScript error is thrown in the console.

D The page reloads unexpectedly.

💡 Hint

The toggle button must target the correct collapse element by id.

If data-bs-target does not match any element's id, Bootstrap cannot find the menu to toggle. So clicking the button does nothing, but no error is thrown.