Quick answer: The Bootstrap navbar is one component with three moving parts: navbar-brand (your logo/name), navbar-nav (the links), and navbar-toggler (the hamburger button that appears under your chosen breakpoint). Add navbar-expand-lg and it collapses to a hamburger under 992px automatically — the JavaScript in bootstrap.bundle.min.js does the opening and closing. Here is the full working pattern plus the customizations everyone asks for.
Table of Contents
The complete working navbar
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container">
<a class="navbar-brand" href="/">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<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="/courses/">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="/contact/">Contact</a></li>
</ul>
</div>
</div>
</nav>The three pairs that must match: data-bs-target="#mainNav" points at the collapsible div’s id. Change the id, change both places — the hamburger silently does nothing if they disagree, which is the #1 navbar bug.
The customizations everyone asks for
| Want | Change |
|---|---|
| Different collapse point | navbar-expand-sm / -md / -lg / -xl |
| Dark theme | bg-dark + data-bs-theme="dark" (5.3 way; old navbar-dark still works) |
| Sticky top | Add sticky-top class to the nav |
| Links right-aligned | ms-auto on the navbar-nav (margin-start auto) |
| Dropdown menu | Wrap a nav-item dropdown — needs the bundle JS |
| Rounded floating bar | Wrap in container, add rounded-3 mt-3 shadow-sm |
Common navbar problems, fixed
- Hamburger does nothing: missing bundle JS, or
data-bs-target/idmismatch. - Links stack on desktop: you wrote
navbar-expand(no breakpoint) or omitted it entirely — the nav stays collapsed at every size. - Brand and links overlap on mobile: you put the toggler outside the container or after the collapsible div — keep the order brand → toggler → collapse.
- Want the Material Design look instead? Our Materialize navbar guide covers the equivalent component for comparison.
If you want an instructor reviewing your layouts live, Ampersand Academy teaches front-end development one-to-one.
Dropdown menus live inside the navbar; the complete pattern is in our Bootstrap dropdown guide.
Official documentation
For the full reference behind this guide, read the Bootstrap 5.3 navbar documentation. It is the source the details above are drawn from, and the first place to check when an option or attribute name changes.
Frequently asked questions
Why is my Bootstrap navbar-toggler button not working?
Two usual causes: the bootstrap.bundle.min.js script is missing from the page, or the data-bs-target value does not exactly match the id of the collapse navbar-collapse div. Check both.
How do I make the Bootstrap navbar sticky?
Add the sticky-top class to the nav element. For a scroll-past translucent effect, add your own CSS with position sticky and a backdrop-filter blur.
How do I right-align links in a Bootstrap navbar?
Add ms-auto to the ul.navbar-nav. The margin-start auto pushes the whole list to the right end of the flex container.
What does navbar-expand-lg mean?
It sets the breakpoint where the nav stops collapsing: at 992px and wider the links show inline; below that they fold into the hamburger menu. Use -sm, -md, -xl to move that point.
How do I center a Bootstrap navbar brand or links?
For centered links use justify-content-center on the collapse div; for a centered brand, make the brand an absolutely positioned element or use a three-column flex layout with empty spacers.
Last updated on · Written by Dinesh Kumar R
