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.