Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add navbars with Bootstrap 5.
Navbar
Navbars let us add navigation to our app.
It’s responsive and has support for branding, navigation, and more.
We’ve to wrap the .navbar with the .navbar-expands-* classes for responsive collapsing.
The * can be replaced with one of sm , md , lg , xl , and xxl classes.
Color scheme classes can also be added.
Spacing and flex utility classes can be used to control spacing and alignment in navbars.
Navbars are responsive by default.
However, this can be overridden.
Supported Content
There are various kinds of content that can be added to a navbar.
.navbar-brand has a brand.
.navbar-nav has the nav.
.navbar-toggle lets us toggle a collapsed nav.
.navbar-text is used for adding vertically centered text.
.collapse-navbar-collapse is for grouping and hiding navbar contents by a parent breakpoint.
To add all that, we can write:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">action 1</a></li>
<li><a class="dropdown-item" href="#">action 2</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">action 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1">disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control mr-2" type="search" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
We have all those classes in the example above.
The nav element has the navbar-expand-lg class to make it expand when it hits the lg breakpoint or wider.
navbar-light makes the content light.
bg-light makes the background light.
We have a div with the collapse and navbar-collapse classes to make the navbar collapse when the screen is narrow.
Also, we added a dropdown by adding an li element with the dropdown clas.
dropdown-menu has the menu.
dropdown-toggle has the toggle.
Brand
The .navbar-brand can be applied to most elements.
However, we may have to adjust the positioning ourselves.
For example, we can write:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">App</a>
</div>
</nav>
to add a navbar with a brand.
We have a link for the brand item.
We can change that to a span:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">App</span>
</div>
</nav>
We changed the bottom margin to 0 with the mb-0 class.
And we added the h1 class to change the text to have a heading style.
We can also add an image as the brand instead of adding text:
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://placekitten.com/200/200" width="30" height="30" alt="cat" loading="lazy">
</a>
</div>
</nav>
We add an image with the given width and height.
loading is set to lazy to make it load when it’s shown.
We can add text beside the image.
For example, we can write:
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://placekitten.com/200/200" width="30" height="30" class="d-inline-block align-top" alt="cat" loading="lazy">
Cat
</a>
</div>
</nav>
We make the image display inline-block with the d-inline-block class so that it’ll display beside the text.
align-top make it align to the top.
Conclusion
We can add navbars with various kinds of content in it.
It can have forms, navbars, brand and dropdowns in it.