Responsive navbar collapse in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the Bootstrap class that makes the navbar responsive and collapsible.

Bootsrap

<nav class="navbar navbar-expand-[1] bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>

Drag options to blanks, or click blank then click option'

Alg

Bsm

Cmd

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sm' or 'md' which collapse too early or too late.

Forgetting to add the 'navbar-expand-' prefix.

The class navbar-expand-lg makes the navbar expand on large screens and collapse on smaller ones.

2fill in blank

medium

Complete the code to add the button that toggles the navbar collapse on small screens.

Bootsrap

<button class="navbar-toggler" type="button" data-bs-toggle="[1]" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Drag options to blanks, or click blank then click option'

Adropdown

Bcollapse

Cmodal

Dtab

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown' which is for menus, not collapse.

Using 'modal' or 'tab' which are unrelated components.

The data-bs-toggle="collapse" attribute tells Bootstrap to toggle the collapse behavior for the navbar.

3fill in blank

hard

Fix the error in the navbar collapse container's id attribute to match the toggle button's target.

Bootsrap

<div class="collapse navbar-collapse" id="[1]">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
  </ul>
</div>

Drag options to blanks, or click blank then click option'

AnavbarContent

BnavbarCollapse

CnavbarToggle

DnavbarSupportedContent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different id that does not match the toggle button's target.

Forgetting the id attribute entirely.

The id must match the data-bs-target value in the toggle button for the collapse to work.

4fill in blank

hard

Fill both blanks to complete the navbar list item with a link that is accessible and styled correctly.

Bootsrap

<li class="nav-item">
  <a class="nav-link [1]" aria-current="[2]" href="#">About</a>
</li>

Drag options to blanks, or click blank then click option'

Aactive

Bpage

Cdisabled

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'disabled' class which makes the link inactive.

Setting aria-current to 'button' which is incorrect.

The class active highlights the current page link, and aria-current="page" helps screen readers know this is the current page.

5fill in blank

hard

Fill all three blanks to complete the responsive navbar with a brand, toggle button, and collapsible menu.

Bootsrap

<nav class="navbar navbar-expand-[1] bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="[2]" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="[3]">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Drag options to blanks, or click blank then click option'

Alg

Bcollapse

CnavbarContent

Dmd

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching the id and data-bs-target values.

Using wrong breakpoint abbreviations.

Using incorrect toggle actions like 'dropdown'.

The navbar expands on large screens (lg), the toggle button uses collapse to show/hide the menu, and the collapsible menu's id navbarContent matches the toggle button's target.