A responsive navigation bar.
✍️ 3 exercises + code challenge in this lessonThe navbar collapses into a "hamburger" menu on small screens.
.navbar .navbar-expand-lg: expands from the lg breakpoint..navbar-brand: logo or site name..navbar-toggler + .collapse .navbar-collapse: the mobile menu..navbar-nav with .nav-link items.data-bs-theme="dark" switches to dark colours.Mastering Bootstrap Navbar helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">CodesInTech</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<button class="btn btn-outline-light btn-sm">Sign in</button>
</div>
</div>
</nav>Check what you learned in “Bootstrap Navbar”.
The logo/site name element in a navbar.
<a class="" href="#">MySite</a>
Which class makes the navbar collapse below the lg breakpoint?
Add a <nav> with the classes "navbar bg-dark" and a navbar-brand link "CIT".
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services