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.
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.
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.