Navbar basics in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap navbar container.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="[1]">
    Navbar content
  </div>
</nav>

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

Acontainer-fluid

Bcontainer

Ccontainer-lg

Dcontainer-sm

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed width container classes like 'container' which limit navbar width.

The container-fluid class creates a full-width container that spans the entire width of the viewport, which is common for navbars.

2fill in blank

medium

Complete the code to add a toggle button for collapsing the navbar 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'

Acollapse

Bdropdown

Cmodal

Dtab

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown' or other toggle types which do not collapse the navbar.

The toggle button uses data-bs-toggle="collapse" to show or hide the navbar content on small screens.

3fill in blank

hard

Fix the error in the navbar brand link to correctly link to the homepage.

Bootsrap

<a class="navbar-brand" href="[1]">MySite</a>

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

A#home

B/

C/home

Dindex.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using relative or fragment links that do not correctly point to the homepage.

The homepage link should be / to point to the root of the website.

4fill in blank

hard

Fill both blanks to create a navbar list with two links: Home and About.

Bootsrap

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

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

A/

B/about

C#home

D#about

Attempts:

3 left

💡 Hint

Common Mistakes

Using fragment links (#home, #about) which do not navigate to separate pages.

The Home link should point to / and About to /about for proper navigation.

5fill in blank

hard

Fill all three blanks to create a responsive navbar that collapses on small screens with a brand and a toggle button.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-[1] bg-[2]">
  <div class="[3]">
    <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">
      <!-- Navbar links go here -->
    </div>
  </div>
</nav>

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

Alight

Bdark

Ccontainer-fluid

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up light/dark classes or using fixed width containers.

The navbar uses navbar-dark for light text styling, bg-dark for dark background, and container-fluid for full width container.