Nav tabs and pills in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap nav tab container.

Bootsrap

<ul class="nav [1]" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
</ul>

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

Anav-item

Bnav-pills

Cnavbar

Dnav-tabs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nav-pills' instead of 'nav-tabs' for tabs.

Forgetting to add the 'nav' class.

The class nav-tabs creates the tab style navigation in Bootstrap.

2fill in blank

medium

Complete the code to create a Bootstrap nav pill link that is active.

Bootsrap

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link [1]" href="#">Active Pill</a>
  </li>
</ul>

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

Adisabled

Bactive

Cshow

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' or 'fade' classes instead of 'active'.

Forgetting to add 'nav-link' class.

The class active marks the pill as selected or active.

3fill in blank

hard

Fix the error in the tab content pane to show the active tab correctly.

Bootsrap

<div class="tab-content">
  <div class="tab-pane [1]" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content here.</div>
</div>

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

Aactive show

Bfade

Cdisabled

Dnav-link

Attempts:

3 left

💡 Hint

Common Mistakes

Using only 'active' without 'show'.

Using 'fade' without 'show' for active pane.

The classes active show make the tab pane visible and active.

4fill in blank

hard

Fill both blanks to create a nav tab link that toggles the correct tab pane.

Bootsrap

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="[1]-tab" data-bs-toggle="tab" data-bs-target="#[2]" type="button" role="tab" aria-controls="[2]" aria-selected="true">[2]</button>
  </li>
</ul>

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

Adashboard

Bsettings

Cprofile

Dhome

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for id and data-bs-target.

Forgetting to add 'data-bs-toggle="tab"'.

The button's id and data-bs-target must match the tab pane's id. Using 'home' for both ensures correct linking.

5fill in blank

hard

Fill all three blanks to create a nav pill with a disabled link and correct aria attributes.

Bootsrap

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link [1]" href="#" tabindex="[2]" aria-disabled="[3]">Disabled Pill</a>
  </li>
</ul>

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

Adisabled

B-1

Ctrue

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Not setting tabindex to '-1' for disabled links.

Forgetting aria-disabled attribute.

To disable a nav link, add the 'disabled' class, set tabindex to '-1' to remove it from keyboard focus, and aria-disabled to 'true' for accessibility.