Bootstrap · Chapter 23 of 43

Bootstrap Navbar

The navbar component is a responsive navigation header that can include a brand logo, links, dropdowns, forms and search bars. It automatically collapses into a hamburger menu on small screens.

A navbar is built from .navbar, a .navbar-brand, a collapsible .navbar-collapse section, and a .navbar-toggler button that appears only on small screens to open the menu.

Syntax

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>

Navbar structure

The outer <nav class="navbar navbar-expand-lg"> controls at which breakpoint the navbar switches from collapsed (mobile) to expanded (desktop) mode. Inside, .navbar-brand shows your site name or logo.

Responsive toggling

The .navbar-toggler button, visible only below the expand breakpoint, uses data-bs-toggle="collapse" to show or hide the .navbar-collapse content, which contains your nav links.

Example 1 (html)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navContent">
      <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>
      </ul>
    </div>
  </div>
</nav>

Output

A light navbar with a brand name, and links that collapse into a hamburger icon on small screens

navbar-expand-lg keeps the menu expanded on large screens and collapses it into a toggle button below that breakpoint.

Example 2 (html)

<nav class="navbar navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">DarkNav</a>
  </div>
</nav>

Output

A dark navbar with white brand text

navbar-dark adjusts the text and icon colors so they are readable against a dark background.

Key points

.navbar-expand-{breakpoint} controls when the navbar collapses.
.navbar-brand displays your site's name or logo.
.navbar-toggler shows a hamburger button on small screens.
navbar-light and navbar-dark adjust text color for background contrast.

💡 Note: Always test your navbar at different screen widths to make sure the collapse breakpoint feels right for your content.

Bootstrap Navbar

Navbar structure

Responsive toggling

Key points

📝 Quick Quiz