Navbar brand and toggler in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a brand name inside the navbar.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">[1]</a>
</nav>

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

Acollapse

Bnavbar-toggler

CMySite

Dcontainer-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using classes like 'navbar-toggler' instead of the brand name text.

Leaving the blank empty or putting invalid class names.

The navbar-brand class is used to display the brand name or logo inside the navbar. Here, you fill the blank with the brand text.

2fill in blank

medium

Complete the code to add a button that toggles 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

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dropdown' or 'modal' instead of 'collapse' for toggling navbar.

Leaving the attribute empty or incorrect.

The data-bs-toggle attribute should be set to collapse to toggle the collapsible navbar content on small screens.

3fill in blank

hard

Fix the error in the button's aria-label attribute to improve accessibility.

Bootsrap

<button class="navbar-toggler" type="button" aria-label="[1]">
  <span class="navbar-toggler-icon"></span>
</button>

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

AToggle navigation

BOpen menu

CClose menu

DExpand navbar

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague or incorrect labels like 'Open menu' or 'Close menu'.

Leaving aria-label empty or missing.

The aria-label should clearly describe the button's action. 'Toggle navigation' is the standard label for navbar toggler buttons.

4fill in blank

hard

Fill both blanks to complete the navbar brand link and toggler button.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="[1]" href="#">Brand</a>
  <button class="[2]" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

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

Anavbar-brand

Bnavbar-collapse

Cnavbar-toggler

Dnavbar-nav

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'navbar-collapse' or 'navbar-nav' with brand or toggler classes.

Using incorrect classes that do not style or function properly.

The brand link uses the class navbar-brand. The button that toggles the navbar uses the class navbar-toggler.

5fill in blank

hard

Fill all three blanks to complete the navbar with brand, toggler, and collapsible content.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="[1]" href="#">MySite</a>
  <button class="[2]" type="button" data-bs-toggle="collapse" data-bs-target="#[3]" aria-controls="[3]" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="[3]">
    <!-- Navbar content here -->
  </div>
</nav>

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

Anavbar-brand

Bnavbar-toggler

CnavbarSupportedContent

Dnavbar-collapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched IDs between button and collapsible div.

Using wrong classes for brand or toggler.

The brand uses navbar-brand. The toggler button uses navbar-toggler. The collapsible content's ID and target is 'navbarSupportedContent'.