Navs & Tabs

Bootstrap.. Navs & Tabs are the navigation parts in Bootstrap to organize links and most likely to navigate between pages to another page or change content on same page without reloading.

Imagine Navs as the foundation (for the links) and Tabs as the particular style or behavior (the “folder tab” look).

1. The Basic Nav

All navigations are started with the class .nav that adds to a list (normally a <ul>) on which it is.

.nav: The base container.
.nav-item- Nag applied to the list items (<li>).
.color: For the actual links (<a>).

HTML

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Normal Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

2. Visual Styles

The appearance of your navigation is easily customizable. For example, by just adding one more class to the <ul> you may achieve this.

A. Tabs (`.nav-tabs`)

This appears to be physical file folder tabs. The links have a borders and the “active” tab is usually a white background that is like front attached to the content below.

B. Pills (`.nav-pills`)

This causes the links to look like buttons or capsules. The active link has a solid background color (typically blue) while the others will remain transparent.

Style	Class to Add	Best Used For…
Default	`.nav`	Just plain footer links or text-only menus.
Tabs	`.nav-tabs`	Professional, dashboard-style layouts.
Pills	`.nav-pills`	Concealed utilities e.g. modern UI, mobile menu or side bar filters.

3. Alignment & Sizing

Bootstrap makes it easy to move these around:

Center it: Add .justify-content-center.
Right-align it: Add .justify-content-end.
Vertical: Add .flex-column to put them on top of eachother (good for sidebars).
Fill/Justify Add .nav-fill to make the links spread out to occupy the whole screen width.

4. Tab JavaScript (Dynamic Content)

This is the “magic” part. You can use Navs to switch between different blocks of text on the same page without refreshing.

The Trigger: Add data-bs-toggle=”tab” to your links.
The Target: Use href=”#id-name” to tell the link which box to open.
The Content: Wrap your text blocks in a .tab-content container with individual .tab-pane divs.

Simple Analogy: The Nav is the remote control button, and the Tab Pane is the TV channel that shows up when you click it.

Summary for your Blog

If you are writing about this, remember these three “rules”:

Structure: Always use nav -> nav-item -> nav-link.
Style: Use .nav-tabs for a classic look or .nav-pills for a modern look.
Function: Use data-bs-toggle if you want the links to swap content on the screen.