Responsive navbar collapse in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a responsive navbar collapse in Bootstrap?

It makes the navigation menu adapt to different screen sizes by hiding menu items behind a toggle button on small screens, improving usability on mobile devices.

beginner

Which Bootstrap class is used to create the toggle button that shows or hides the collapsed navbar content?

The <code>navbar-toggler</code> class is used on a <button> element to create the toggle button for collapsing and expanding the navbar content.

intermediate

What attribute connects the toggle button to the collapsible navbar content in Bootstrap?

The data-bs-target attribute on the toggle button points to the ID of the collapsible navbar content, linking them for toggle functionality.

intermediate

How does Bootstrap decide when to collapse the navbar?

Bootstrap uses responsive breakpoint classes like navbar-expand-lg to determine at which screen width the navbar should expand or collapse automatically.

intermediate

Name one accessibility feature to include in a responsive navbar toggle button.

Use aria-controls to link the button to the collapsible content, aria-expanded to indicate toggle state, and aria-label to describe the button purpose for screen readers.

Which Bootstrap class makes the navbar expand only on large screens and collapse on smaller ones?

A navbar-collapse

B navbar-expand-lg

C navbar-toggler

D navbar-nav

The class navbar-expand-lg tells Bootstrap to keep the navbar expanded on large screens and collapse it on smaller screens.

What HTML element is typically used for the navbar toggle button?

A <button>

B <a>

C <div>

D <span>

A button element is used for the toggle because it is accessible and supports keyboard interaction.

Which attribute on the toggle button specifies the ID of the collapsible navbar content?

A href

B id

C data-bs-target

D aria-controls

The data-bs-target attribute points to the ID of the collapsible content to toggle it.

What role does the navbar-collapse class play in a Bootstrap navbar?

A It wraps the collapsible menu items that hide/show on toggle.

B It styles the toggle button.

C It defines the navbar brand.

D It creates the navbar container.

The navbar-collapse class is used on the div that contains the menu items that collapse or expand.

Which ARIA attribute indicates if the navbar toggle button is expanded or collapsed?

A aria-label

B aria-hidden

C aria-pressed

D aria-expanded

aria-expanded tells screen readers whether the toggle button controls an expanded or collapsed menu.

Explain how to create a responsive navbar that collapses on small screens using Bootstrap.

Think about the classes and attributes Bootstrap requires for toggle functionality.

Describe why responsive navbar collapse improves user experience on mobile devices.

Consider how navigation looks and works on phones versus desktops.

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