Navs: Tabs & Pills

A Bootstrap 3 nav is nothing more than a plain <ul class="nav"> with an extra styling class added on top. That one base markup pattern — .nav > li > a — powers three different looks: plain stacked links, browser-style tabs, and rounded pills. In this lesson we'll style all three, then build a static Overview / Reviews / Photos tab strip for a TrailMap trail-detail page.

The Base .nav Markup

Every nav starts the same way: an unordered list with the .nav class, one <li> per item, and the clickable link inside each. Nothing here is tab- or pill-specific yet — that comes from an extra class on the <ul> itself.

<ul class="nav">
  <li class="active"><a href="#">Overview</a></li>
  <li><a href="#">Reviews</a></li>
  <li><a href="#">Photos</a></li>
</ul>
Note: The .active class goes on the <li>, not the <a>. This is a plain .nav with no styling class, so on its own it just renders as a horizontal row of plain links.

.nav-tabs: Tab-Styled Navigation

Add .nav-tabs to the same <ul> to get a bottom border under the whole strip, with each item drawn as a bordered tab. The .active tab's bottom border is painted the same color as the page background, visually "connecting" it to the content below.

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

On its own, .nav-tabs only changes styling — clicking an item does nothing but follow the link's href. Wiring the tabs up so clicking actually swaps visible content is covered later in the JS Tab plugin lesson.

.nav-pills and .nav-stacked

Swap .nav-tabs for .nav-pills and each item becomes a self-contained, rounded "pill" button instead of a bordered tab, with no connecting bottom border.

<ul class="nav nav-pills">
  <li class="active"><a href="#">All Trails</a></li>
  <li><a href="#">Easy</a></li>
  <li><a href="#">Moderate</a></li>
  <li><a href="#">Hard</a></li>
</ul>

Add .nav-stacked alongside .nav-pills to stack the pills vertically instead of laying them out in a row — handy for a sidebar filter list.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">All Trails</a></li>
  <li><a href="#">Easy</a></li>
  <li><a href="#">Moderate</a></li>
</ul>
Note: .nav-stacked only makes sense on .nav-pills — there's no stacked variant of .nav-tabs.

.nav-justified: Full-Width, Evenly-Spaced Items

Add .nav-justified to either a .nav-tabs or a .nav-pills list to force every item to the same width, spreading them evenly across the full width of the parent instead of only being as wide as their text.

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Overview</a></li>
  <li><a href="#">Reviews</a></li>
  <li><a href="#">Photos</a></li>
</ul>

This is a good fit for a tab strip with just two or three items, where leaving them left-aligned would look lopsided on a wide screen.

Worked Example: TrailMap's Trail-Detail Tabs

Here's a static, tab-styled nav for a TrailMap trail-detail page — Overview, Reviews, and Photos. This example is markup and styling only; the href values are placeholders and nothing happens on click yet.

<div class="trail-detail-header">
  <h3>Eagle Ridge Loop</h3>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Overview</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">Photos</a></li>
  </ul>
</div>

Once the reader has this styled shell in place, the later Tab plugin lesson shows how to add data-toggle="tab" and the matching .tab-content / .tab-pane panels so clicking Overview, Reviews, or Photos actually swaps the visible content underneath.

Next, learn how these same .nav building blocks power the site-wide Navbar component.