Navbar

The Bootstrap 3 navbar is a responsive navigation header built from .navbar plus a theme class, a .navbar-header holding the brand and the mobile toggle button, and a collapsible .navbar-nav list of links. Below a breakpoint it collapses into a hamburger button powered by jQuery; above it, the links sit in a row. In fact, you don't have to imagine this — scroll up and look at the header of this very page. It's built with exactly the pattern you're about to learn.

Theming: .navbar-default and .navbar-inverse

Every navbar needs the base .navbar class plus one of two theme classes: .navbar-default for a light background with dark text, or .navbar-inverse for a dark background with light text.

<!-- light navbar -->
<nav class="navbar navbar-default"> ... </nav>

<!-- dark navbar -->
<nav class="navbar navbar-inverse"> ... </nav>
Bootstrap 3 vs Bootstrap 4: .navbar-default and .navbar-inverse are Bootstrap-3-only names. Bootstrap 4 renamed them to .navbar-light and .navbar-dark, and made the background color a separate utility class (.bg-light, .bg-dark, etc.) instead of baking it into the theme class itself. If you see .navbar-light/.navbar-dark in a Bootstrap 3 project, double check — they don't do anything there.

.navbar-header and .navbar-brand

.navbar-header groups together the pieces that always stay visible, even while the rest of the navbar is collapsed: the brand link (.navbar-brand) and the hamburger toggle button.

<div class="navbar-header">
  <a class="navbar-brand" href="#">TrailMap</a>
</div>

The Collapsing Hamburger Toggle

The toggle button uses .navbar-toggle plus data-toggle="collapse" and a data-target matching the id of the collapsible panel. Bootstrap 3's bundled JavaScript, which itself requires jQuery, listens for the click and toggles the panel open and closed.

<button type="button" class="navbar-toggle"
        data-toggle="collapse" data-target="#trailNav">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse" id="trailNav">
  <!-- .navbar-nav lives in here -->
</div>
Note: Bootstrap 3 uses data-toggle="collapse" / data-target="#trailNav" — never data-bs-toggle / data-bs-target. Those data-bs-* attribute names only exist in Bootstrap 5; using them here does nothing because Bootstrap 3's JavaScript never looks for that prefix.

.navbar-nav and Right-Aligning with .navbar-right

Nav links live in a .nav.navbar-nav list inside the collapsible panel. Add .navbar-right to a second list to push it to the right edge of the navbar on wide screens.

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Browse Trails</a></li>
  <li><a href="#">Submit a Trail</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#">My Account</a></li>
</ul>

Positioning: .navbar-fixed-top and .navbar-static-top

.navbar-fixed-top pins the navbar to the top of the viewport with position: fixed, so it stays visible while the page scrolls underneath it. .navbar-static-top instead keeps the navbar in the normal document flow, full-width, but without the fixed positioning — it scrolls away with the rest of the page.

<!-- stays pinned while the page scrolls -->
<nav class="navbar navbar-inverse navbar-fixed-top"> ... </nav>

<!-- full-width, but scrolls with the page -->
<nav class="navbar navbar-default navbar-static-top"> ... </nav>
Note: A .navbar-fixed-top navbar overlaps the content right below it, since a fixed element is taken out of normal document flow. Add matching padding-top to <body> to compensate.

Full Worked Example: TrailMap's Responsive Navbar

Putting every piece together: an inverse (dark) navbar that collapses into a hamburger menu on narrow screens, with a brand link, left-aligned nav links, and a right-aligned account link. This is the exact same pattern used at the top of this page — open this site's header markup and compare it side by side.

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle"
              data-toggle="collapse" data-target="#trailNav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">TrailMap</a>
    </div>

    <div class="collapse navbar-collapse" id="trailNav">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Browse Trails</a></li>
        <li><a href="#">Submit a Trail</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">My Account</a></li>
      </ul>
    </div>
  </div>
</nav>
Remember: the toggle button needs jQuery and Bootstrap 3's bundled JS loaded on the page — without them, the hamburger button renders but clicking it does nothing.
Next, learn how to attach a menu of choices to a button or link with Dropdowns.