Bootstrap 5 Navbar


Bootstrap 5 provides flexible and responsive navigation bars (navbars) that can be easily customized. Bootstrap navbars are responsive by default. The navbar-expand-lg class ensures the navbar collapses on smaller screens.

Responsive Navbar

  • .navbar-expand-sm Collapses on extra small screens.
  • .navbar-expand-md Collapses on extra medium screens.
  • .navbar-expand-lg Collapses on large screens.
  • .navbar-expand-xl Collapses on extra large screens.
Example 
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
     <li class="nav-item">
        <a class="nav-link" 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>
</nav>
Try it Yourself

Colored Navbar

Use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light). Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color.

Example 
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
     <li class="nav-item">
        <a class="nav-link" 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>
</nav>
Try it Yourself