Navbar

The navbar component builds a site header that behaves correctly at every screen size — full links across the top on desktop, collapsing into a hamburger-menu toggle on mobile — without any custom media queries or JavaScript from you.

A basic navbar

HTML index.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">CodeAtlas</a>
    <div class="navbar-nav">
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link" href="#">Courses</a>
      <a class="nav-link" href="#">About</a>
    </div>
  </div>
</nav>

Rendered result

A dark, full-width horizontal bar. On the left, "CodeAtlas" in bold white text; to its right, three plain white links — Home, Courses, About — spaced evenly apart, all vertically centered in the bar.

navbar-dark tells Bootstrap the background is dark, so it renders the brand and links in light text for contrast; bg-dark actually supplies that dark background. They're separate classes on purpose — you could have a light background with navbar-dark-style text if your design called for it.

The responsive collapse

On its own, the example above doesn't collapse on mobile. The full pattern adds a toggle button and wraps the links in a collapsible container:

HTML index.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">CodeAtlas</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <div class="navbar-nav">
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">Courses</a>
        <a class="nav-link" href="#">About</a>
      </div>
    </div>
  </div>
</nav>

Rendered result

On a wide screen: identical to the first example — links visible across the bar, and the toggle button is hidden entirely. On a narrow screen: the links disappear, replaced by a small hamburger-icon button on the right; tapping it slides the link list open directly beneath the bar.

navbar-expand-lg is the setting that controls this — it means "show everything expanded from the lg breakpoint up, collapse below it." Swap it for navbar-expand-md or navbar-expand-sm to change exactly where the collapse kicks in.

The toggle button's data-bs-toggle and data-bs-target attributes require Bootstrap's JavaScript bundle to actually be loaded on the page (a <script> tag, in addition to the CSS <link> from lesson 1) — without it, the button renders correctly but clicking it does nothing.

Note: the collapsible menu's id (navMenu here) has to exactly match the toggle button's data-bs-target value, written as #navMenu with the leading #. Typo either one and the button renders fine but silently does nothing when clicked — a common, hard-to-spot mistake since there's no error in the console.

PreviousForms NextCards