Responsive Navbar Collapse

Navbar Collapse

Bootstrap's responsive navbar uses collapse internally — the navbar-collapse div hides on mobile and is toggled by the hamburger button.

Example

<nav class="navbar navbar-expand-lg navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-expanded="false" aria-controls="navMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navMenu">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    </ul>
  </div>
</nav>

HTML

Full Editor

Pro Tip

navbar-expand-lg shows the nav links at lg breakpoint — change to md or xl as needed.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned