Why navigation structure matters in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap navigation bar.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-[1]" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>

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

Acollapse

Bshow

Cexpand

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' instead of 'collapse' causes the menu to always be visible.

Using 'expand' is not a valid Bootstrap class for this purpose.

The class 'collapse' is used to hide the navigation menu on smaller screens and toggle it with the button.

2fill in blank

medium

Complete the code to add a navigation link with proper Bootstrap classes.

Bootsrap

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="[1]" href="#about">About</a>
  </li>
</ul>

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

Anav-button

Bnavbar-brand

Cnav-link

Dnav-item

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nav-item' on the anchor tag instead of the list item.

Using 'navbar-brand' for regular links.

The 'nav-link' class styles the anchor tag as a navigation link in Bootstrap.

3fill in blank

hard

Fix the error in the navigation bar code by completing the blank.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Site</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-[1]" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
    </ul>
  </div>
</nav>

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

Ashow

Bcollapse

Chidden

Dexpand

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' causes the menu to be always visible.

Using 'expand' is not a valid class here.

The 'collapse' class is required on the div to make the toggler button work properly.

4fill in blank

hard

Fill both blanks to create a responsive navigation bar that collapses on small screens and expands on large screens.

Bootsrap

<nav class="navbar navbar-[1]-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-[2]" id="navMenu">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
    </ul>
  </div>
</nav>

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

Aexpand

Bcollapse

Cshow

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' instead of 'collapse' causes menu to always show.

Using 'collapse' on navbar class is incorrect.

The navbar expands on large screens with 'navbar-expand-lg' and the menu collapses with 'collapse' class.

5fill in blank

hard

Fill all three blanks to create a navigation link that is active, accessible, and uses Bootstrap classes correctly.

Bootsrap

<li class="nav-item [1]">
  <a class="nav-link" href="#" aria-current="[2]">Home <span class="sr-only">[3]</span></a>
</li>

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

Aactive

Bpage

C(current)

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting 'aria-current' reduces accessibility.

Using 'disabled' class instead of 'active' changes the link behavior.

The 'active' class highlights the item, 'aria-current="page"' marks it as current for screen readers, and '(current)' is visually hidden text for accessibility.