Nearby lessons
22 of 39📚 BS5 Navbar
📌 What Is the Bootstrap 5 Navbar?
The navbar is a responsive header with brand, links, and optional form. Use .navbar, .navbar-expand-* (e.g. .navbar-expand-lg) so it collapses on small screens, .navbar-brand, .navbar-toggler, and .navbar-collapse with .navbar-nav and .nav-item / .nav-link. Requires Bootstrap’s JavaScript for the toggler.
📱 Basic Navbar (.navbar, .navbar-brand, .navbar-nav, .navbar-toggler, .navbar-collapse)
.navbar – outer wrapper. .navbar-expand-lg – full nav from 992px up; below that, show toggler. .navbar-brand – logo or site name. .navbar-toggler – hamburger button (use data-bs-toggle="collapse" and data-bs-target="#id"). .navbar-collapse – wrapper for links that collapse. .navbar-nav – list of links. .nav-item and .nav-link – each link.
🌙 Dark Navbar (.navbar-dark, .bg-dark)
.navbar-dark – light text for dark background. .bg-dark – dark background. Use with .navbar.
📐 Navbar with Form
Put a form (e.g. search) inside .navbar-collapse. Use utility classes like .d-flex, .me-auto to align form to the right.
✅ Navbar Best Practices
- Use .navbar-expand-lg (or -sm, -md, -xl) so the menu collapses on small screens.
- Give .navbar-collapse a unique
idand set data-bs-target on the toggler. - Use .navbar-dark .bg-dark or .navbar-light .bg-light for contrast.