Nav & Tabs

Bootstrap 4's .nav is a base class for building horizontal or vertical link lists — it powers navbars, tab strips, and pill navigation alike. On its own .nav just lays links out; add .nav-tabs or .nav-pills for styling, and wire up the jQuery data-toggle="tab" plugin to make those links actually swap visible content panes. We'll build a tabbed TrailMap trail-detail page with Overview, Reviews, and Photos tabs.

The Base .nav Component

A plain nav list: an unordered list with .nav, each item wrapped in .nav-item, each link carrying .nav-link.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Overview</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Reviews</a>
  </li>
</ul>

.nav-tabs and .nav-pills

.nav-tabs adds a bottom border and classic tab look; .nav-pills gives each link a fully rounded, pill-shaped background instead. Both accept .active on the current .nav-link.

<!-- tabs -->
<ul class="nav nav-tabs"> ... </ul>

<!-- pills -->
<ul class="nav nav-pills"> ... </ul>

Making Tabs Functional: data-toggle="tab"

Styling alone doesn't switch content. To make clicking a tab reveal a matching pane, each .nav-link needs data-toggle="tab" and an href pointing at the target pane's id. Each pane lives inside a shared .tab-content wrapper as a .tab-pane. This is a jQuery plugin in Bootstrap 4 — unlike Bootstrap 5, which reimplemented the tab plugin in vanilla JavaScript, Bootstrap 4's version will not run without jQuery loaded on the page.

<ul class="nav nav-tabs" id="trailTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#overview" role="tab">Overview</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="overview" role="tabpanel">
    Overview content here.
  </div>
  <div class="tab-pane fade" id="reviews" role="tabpanel">
    Reviews content here.
  </div>
</div>
Note: the pane that starts open needs both show and active — fade alone with only active renders it invisible until the transition runs.

Full Worked Example: TrailMap Trail-Detail Tabs

A trail-detail page for "Blue Ridge Overlook" with three tabs: Overview, Reviews, and Photos.

<ul class="nav nav-tabs" id="trailTabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#overview">Overview</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#reviews">Reviews (128)</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#photos">Photos</a>
  </li>
</ul>

<div class="tab-content p-3 border border-top-0">
  <div class="tab-pane fade show active" id="overview">
    <p>7.2 miles, 1,450 ft elevation gain, moderate difficulty. Best hiked spring through fall.</p>
  </div>
  <div class="tab-pane fade" id="reviews">
    <p>"Stunning overlook, worth every switchback." – 4.8 average rating.</p>
  </div>
  <div class="tab-pane fade" id="photos">
    <p>34 photos submitted by hikers.</p>
  </div>
</div>

No custom JavaScript is required — Bootstrap 4's bundled jQuery plugin handles the click and the pane swap automatically as long as jQuery loads before bootstrap.min.js.

Next, layer clickable menus on top of nav items with Dropdowns.