Navbar brand and toggler 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 5 navbar code snippet. What will you see rendered in the browser?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</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>
      </ul>
    </div>
  </div>
</nav>

A A navbar with brand name 'MySite' centered and no toggler button visible on any screen size.

B A horizontal navbar with brand name 'MySite' on the left, a toggler button visible on small screens, and two links 'Home' and 'Features' that collapse behind the toggler on small screens.

C A navbar with brand name 'MySite' on the right and the toggler button on the left, with links always visible.

D A vertical sidebar with brand name 'MySite' at the top and two links 'Home' and 'Features' always visible below it.

💡 Hint

Think about how Bootstrap's navbar-expand-lg class controls when the toggler appears and how the collapse class hides links on small screens.

The 'navbar-expand-lg' class means the navbar links are shown horizontally on large screens and collapse behind the toggler on smaller screens. The brand is on the left by default. The toggler button appears on small screens to toggle the collapsed links.

📝 Syntax

intermediate

Which option correctly adds an accessible label to the navbar toggler button?

Bootstrap recommends adding an aria-label to the toggler button for accessibility. Which of these button codes correctly includes an accessible label?

A

<button class="navbar-toggler" type="button" aria-description="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

B

<button class="navbar-toggler" type="button" aria-labelledby="toggleLabel">
  <span class="navbar-toggler-icon"></span>
</button>

C

<button class="navbar-toggler" type="button" aria-hidden="true">
  <span class="navbar-toggler-icon"></span>
</button>

D

<button class="navbar-toggler" type="button" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

💡 Hint

The aria-label attribute provides a text label directly on the element for screen readers.

The aria-label attribute is the correct way to provide an accessible name for the button. aria-labelledby requires an element with the referenced id, aria-hidden hides the element from screen readers, and aria-description is not a valid ARIA attribute.

❓ selector

advanced

Which CSS selector targets only the navbar brand link inside a Bootstrap navbar?

You want to style only the brand link inside a Bootstrap navbar. Which CSS selector correctly targets it?

A nav > .navbar-brand

B .navbar-brand > a

C .navbar .navbar-brand

D .navbar-brand a

💡 Hint

Remember the brand link has the class 'navbar-brand' and is inside an element with class 'navbar'.

The brand link itself has the class 'navbar-brand', so selecting '.navbar .navbar-brand' targets it inside any navbar. Option C looks for an 'a' inside '.navbar-brand' which is incorrect because 'navbar-brand' is on the 'a' itself. Option C selects a direct child which may not always be true. Option C selects an 'a' inside '.navbar-brand' which is incorrect.

❓ layout

advanced

What layout behavior does the class 'navbar-expand-md' provide in Bootstrap?

If you use the class 'navbar-expand-md' on a navbar, how does it behave on different screen sizes?

A The navbar links are collapsed behind the toggler on screens smaller than medium (md) and shown horizontally on medium and larger screens.

B The navbar links are always collapsed behind the toggler on all screen sizes.

C The navbar links are always shown horizontally on all screen sizes.

D The navbar links collapse only on extra large (xl) screens and are horizontal on smaller screens.

💡 Hint

The 'expand-md' means expand starting at medium screens and up.

The 'navbar-expand-md' class makes the navbar links visible horizontally on medium (md) and larger screens. On smaller screens, the links collapse behind the toggler button.

🧠 Conceptual

expert

Why is it important to include the 'aria-controls' attribute on the navbar toggler button?

In Bootstrap navbars, the toggler button often has an attribute like aria-controls="navbarSupportedContent". Why is this attribute important for accessibility?

A It tells assistive technologies which element the button controls, helping users understand what will be shown or hidden when toggled.

B It links the button to the CSS styles of the navbar content.

C It styles the toggler button with a special icon automatically.

D It makes the toggler button visible only on small screens.

💡 Hint

Think about how screen readers announce controls and their relationships.

The aria-controls attribute identifies the element that the button toggles. This helps screen reader users understand what content will be affected by the button, improving navigation and usability.