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 navbar content with Bootstrap 5.
Nav
We can add navigation links to our navbar.
To do that, we add a div with the collapse
and navbar-collapse
classes.
For example, we can write:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Setting</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
We have a div with the collapse
and navbar-collapse
class to use as the container for the nav links.
Then we add the toggle icon by adding a span with the navbar-toggler-icon
class.
We also have a button with the navbar-toggler
class to add the navbar toggle.
Then in the navbar-nav
we have the nav links in the li with the .nav-item
class.
This together will create a responsive navbar that’s collapsed when the screen is narrow and expanded when it’s wide.
We can also add dropdowns into our navbar.
For example, 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="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" >
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">action</a></li>
<li><a class="dropdown-item" href="#">action 2</a></li>
<li><a class="dropdown-item" href="#">action 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
We add our dropdown by creating an li
element with the .nav-item
and dropdown
classes.
This way, it’ll fit in the menu.
Also, we have the .dropdown-menu
class to display the menu.
.dropdown-item
has the dropdown menu items.
Forms
We can also add forms to our navbars.
For example, we can write:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<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>
</nav>
to add the form into the navbar.
We have a form with the d-flex
class to make it display flex.
The input has mr-2
to add some right margins.
We can also add other items besides the form.
For example, we can write:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">App</a>
<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>
</nav>
We added an a
element with the navbar-brand
class to add the brand on the left side.
The input has the form-control
class so that it has Bootstrap styles applied to it.
Input groups also work with navbars.
For example, we can write:
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</nav>
We have the input-group
class applied to the div.
And we have the span with the input-group-text
to add the text.
Also, we can add buttons to our navbar.
For example, we can write:
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success mr-2" type="button">big button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">small button</button>
</form>
</nav>
We have buttons of various sizes in the form
element.
The form has the container-fluid
and justify-content-start
to lay out the buttons.
justify-content-start
make them align to the left.
The left button has the mr-2
class to add some right margins to the button.
Conclusion
We can add forms, pictures, dropdowns, and buttons to our navbar.