Navbar

Prev Next

The Bootstrap 4 navbar is a responsive, flexbox-based navigation header. Below a breakpoint it collapses into a hamburger button; above it, the links lay out horizontally. Unlike Bootstrap 5, the collapsing toggler in Bootstrap 4 is powered entirely by jQuery — it works off the data-toggle="collapse" / data-target="#id" attribute pair, not Bootstrap 5's data-bs-toggle/data-bs-target. We'll build a full responsive navbar for TrailMap, our hiking-trail directory app, over the course of this lesson.

The Base Navbar and Responsive Breakpoints

Every navbar starts with .navbar, plus a .navbar-expand-{breakpoint} class that decides at which screen width the navbar switches from collapsed to expanded. Below that breakpoint, .navbar-nav stacks vertically inside the collapsing panel; at or above it, the links sit in a row.

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <!-- navbar content goes here -->
</nav>

Class	Expands (becomes horizontal) at
`.navbar-expand-sm`	≥ 576px
`.navbar-expand-md`	≥ 768px
`.navbar-expand-lg`	≥ 992px
`.navbar-expand-xl`	≥ 1200px

Note: Omit .navbar-expand-* entirely and the navbar stays collapsed (hamburger-only) at every screen width, all the way up to desktop.

The Collapsing Toggler (jQuery-Powered)

The hamburger button is a plain <button> with .navbar-toggler. Its data-target must match the id of the collapsible panel that wraps your nav links. Bootstrap 4's bundled JavaScript (which itself depends on jQuery) listens for clicks on [data-toggle="collapse"] and toggles the .show class on the target.

<button class="navbar-toggler" type="button"
        data-toggle="collapse" data-target="#trailNav"
        aria-controls="trailNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="trailNav">
  <!-- .navbar-nav lives in here -->
</div>

Bootstrap 4 vs Bootstrap 5: Bootstrap 4 uses data-toggle="collapse" / data-target="#trailNav". Bootstrap 5 renamed these to data-bs-toggle / data-bs-target. Mixing the two prefixes on the same page is a common source of "my navbar won't open" bugs — always match the prefix to the Bootstrap version actually loaded.

Brand, Links, and Item Structure

The brand is an anchor with .navbar-brand. Links live inside .navbar-nav, wrapped one-per-.nav-item, with the clickable element carrying .nav-link. Add .active to a .nav-item (or its link) to mark the current page.

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

<ul class="navbar-nav">
  <li class="nav-item active">
    <a class="nav-link" href="#">Trails <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Submit a Trail</a>
  </li>
</ul>

Light vs Dark Navbars

.navbar-light darkens the text/icons so they read on a light background; .navbar-dark lightens them for a dark background. Neither sets the background color itself — pair them with a background utility such as .bg-light, .bg-dark, or .bg-primary.

<!-- light navbar, light background -->
<nav class="navbar navbar-expand-md navbar-light bg-light"> ... </nav>

<!-- dark text/icons on a dark, brand-colored background -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> ... </nav>

Full Worked Example: TrailMap's Responsive Navbar

Putting it all together: a dark, brand-colored navbar that collapses into a hamburger menu below the md breakpoint, with a brand link and four nav items.

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <i class="fa fa-map-o"></i> TrailMap
  </a>

  <button class="navbar-toggler" type="button"
          data-toggle="collapse" data-target="#trailNav"
          aria-controls="trailNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="trailNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Browse Trails</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Submit a Trail</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">My Bookmarks</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

.ml-auto on the <ul> pushes the links to the right on wide screens, while still stacking full-width inside the collapsed panel on narrow ones.

Remember: the toggler needs jQuery and Bootstrap's bundled JS loaded on the page — with no script, the hamburger button renders but clicking it does nothing.

Next up, learn how to build tabbed content with Nav & Tabs.

Prev Next