Nav tabs and pills in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap nav tabs code?

Look at the following Bootstrap nav tabs code snippet. What will you see rendered in the browser?

Bootsrap

<ul class="nav nav-tabs" 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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
</ul>

A A single button labeled 'Home' with no tabs or pills.

B Two vertical pills labeled 'Home' and 'Profile' with 'Profile' pill highlighted as active.

C A dropdown menu with options 'Home' and 'Profile'.

D Two horizontal tabs labeled 'Home' and 'Profile' with 'Home' tab highlighted as active.

💡 Hint

Remember that 'nav-tabs' class creates horizontal tabs and 'active' class highlights the selected tab.

The 'nav nav-tabs' class creates horizontal tabs. The 'nav-link active' class on the 'Home' button highlights it as the active tab. The 'Profile' tab is inactive and not highlighted.

❓ selector

intermediate

Which CSS selector targets the active pill in Bootstrap nav pills?

Given Bootstrap nav pills, which CSS selector correctly styles the active pill?

A .nav-pills .nav-link.active

B .nav-tabs .nav-item.active

C .nav-pills .nav-item.selected

D .nav-tabs .nav-link.current

💡 Hint

Active pills use the 'active' class on the 'nav-link' element inside 'nav-pills'.

Bootstrap applies the 'active' class to the 'nav-link' inside '.nav-pills' to indicate the active pill. So '.nav-pills .nav-link.active' targets the active pill correctly.

🧠 Conceptual

advanced

What ARIA role should be used on the container of Bootstrap nav tabs for accessibility?

For better accessibility, which ARIA role attribute is recommended on the container element of Bootstrap nav tabs?

A role="tablist"

B role="navigation"

C role="menu"

D role="listbox"

💡 Hint

Tabs are a set of related tabs, so the container needs a role that groups them as tabs.

The container of tabs should have role="tablist" to indicate it groups tab elements. This helps screen readers understand the structure.

❓ layout

advanced

How to make Bootstrap nav pills stack vertically on small screens?

You want Bootstrap nav pills to display horizontally on large screens but stack vertically on small screens. Which class combination achieves this?

A Add 'd-block d-sm-flex' to the nav element

B Add 'flex-row flex-sm-column' to the nav element

C Add 'flex-column flex-md-row' to the nav element

D Add 'flex-column flex-sm-row' to the nav element

💡 Hint

Use Bootstrap's responsive flex utility classes with the right breakpoint.

Using 'flex-column flex-md-row' makes the nav stack vertically (column) by default and switch to horizontal (row) at medium screens and above.

📝 Syntax

expert

What error does this Bootstrap nav tabs code cause?

Examine this Bootstrap nav tabs snippet. What error or issue will it cause when rendered?

Bootsrap

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content</div>
</div>

A Tabs do not switch content because 'data-bs-toggle' should be 'data-toggle'.

B No error; tabs work correctly with content switching.

C Accessibility issue: missing 'aria-selected' on active tab link.

D JavaScript error because 'href' attribute is missing on tab links.

💡 Hint

Bootstrap 5 uses 'data-bs-toggle' and 'href' for tab links to switch content.

The code uses correct Bootstrap 5 syntax with 'data-bs-toggle' and 'href' attributes. The active tab has 'aria-selected="true"'. This code works correctly with no errors.