Nav tabs and pills in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are nav tabs in Bootstrap?

Nav tabs are a Bootstrap component that creates a horizontal menu with clickable tabs to switch between different content sections without reloading the page.

beginner

How do nav pills differ visually from nav tabs?

Nav pills have rounded edges and look like buttons, while nav tabs have square edges and look like traditional tabs. Both serve to switch content but have different styles.

beginner

Which Bootstrap class is used to create a nav container for tabs or pills?

The class nav is used as the base container. Then add nav-tabs for tabs or nav-pills for pills styling.

beginner

How do you mark a tab or pill as active in Bootstrap?

Add the class active to the <li> or <a> element representing the tab or pill to show it as selected.

intermediate

What role do data-bs-toggle="tab" attributes play in Bootstrap nav tabs?

They enable the tab switching behavior by telling Bootstrap JavaScript to show the linked tab content when the tab is clicked.

Which class creates a Bootstrap nav container styled as tabs?

A nav-pills

B nav-tabs

C nav-buttons

D nav-list

The class nav-tabs styles the nav container as tabs.

What class do you add to a nav item to show it as active?

A active

B current

C selected

D highlight

The active class marks the tab or pill as selected.

Which attribute enables tab switching behavior in Bootstrap nav tabs?

A data-bs-toggle="tab"

B data-toggle="pill"

C data-switch="nav"

D data-nav="active"

data-bs-toggle="tab" tells Bootstrap to switch tab content on click.

How do nav pills visually differ from nav tabs?

A Pills have square edges, tabs have rounded edges

B Pills use icons, tabs use text

C Pills have rounded edges, tabs have square edges

D Pills are vertical, tabs are horizontal

Nav pills have rounded edges like buttons; tabs have square edges.

Which HTML element usually contains the nav items in Bootstrap nav tabs?

A <footer>

B <section>

C <div>

D <ul>

A

list is commonly used to hold nav items.

Explain how to create a basic Bootstrap nav tabs component and how it works.

Think about the HTML structure and Bootstrap classes needed.

Describe the visual and functional differences between nav tabs and nav pills in Bootstrap.

Focus on style and usage differences.