Bootstrap Navbar Basics

The Bootstrap navbar is a responsive navigation bar that collapses into a hamburger menu on small screens. The base structure uses .navbar with a color scheme class (.navbar-dark or .navbar-light) and a background class.

Key Classes

.navbar-brand marks the logo/brand name. .navbar-nav contains the navigation links. .nav-item and .nav-link style the individual links. .navbar-toggler creates the mobile hamburger button.

Example

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">MyApp</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

HTML

Full Editor

Pro Tip

Use .navbar-expand-{breakpoint} to control at which breakpoint the navbar expands — .navbar-expand-lg is the most common choice for standard layouts.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned