Lesson 16 - Bootstrap - Navigation bar
In the previous lesson, Bootstrap - Navigation, we learned how to style the navigation, including tabs. We'll use this knowledge in today's tutorial to create a navigation bar. We're continuing the Bootstrap CSS framework course.
Navbar is one of the most important Bootstrap components and at the same time a part of most layouts. It's a responsive navigation bar which can contain many different elements and which "shrinks" on mobile devices into a single "hamburger" button opening a vertical menu. Except for the navigation, the bar often contains the logo, forms (e.g. searching on the website), texts, and buttons for displaying other contents.
<nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="https://www.ict.social/images/1/css/bootstrap/twitter.png" class="d-inline-block align-top" width="32" height="32" alt="Twitter" /> shop.com </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar-content" aria-controls="navigation-bar-content" aria-expanded="false" aria-label="Open navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navigation-bar-content"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">About the company <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="products-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="products-dropdown"> <a class="dropdown-item" href="#">Hobby</a> <a class="dropdown-item" href="#">Kitchen</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Garden</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Pricing</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
Now, let's describe the code.
First things first. Of course, we create the navigation bar using the
<nav> element with the
.navbar class. To achieve
a responsive design we add e.g. the
.navbar-expand-lg class which
causes a vertical menu to display instead of the navigation bar on devices
smaller than large. In the example above, the
class is used for the purposes of this article. We have already mentioned
breakpoints, specifying dimensions of the device types, in the lesson Bootstrap - Typography.
Notice that the responsive menu is created using Collapse.
We place the logo inside a link with the
.navbar-brand class. If
we put an image inside the link as well, it's also necessary to specify its size
and the vertical align using utility classes.
The next item we usually add is a button visible only on mobile devices, used
for opening the vertical menu. It's a
<button> element with
.navbar-toggler class and the
data-toggle="collapse" data attribute. As
we provide the selector for the element representing the other content of the
navigation which should be inside the dropdown menu instead of the navigation
bar. On larger screens this content will be rendered directly in the navigation
bar. This element follows as
If there's too little elements and we want to distribute the space between
them equally, we can assign the following classes to the navigation:
navbar navbar-light bg-light justify-content-between.
We place the individual parts of the navigation as the
<ul> list items with the
.navbar-nav class. The
list stretches to fill the whole width. The
mr-auto class sets the
right margin to the
auto value. We have already tried to use the
navigation items in the lesson Bootstrap - Navigation. We
should also assign the
.active class to the to link to the current
The last thing, inline form,
shouldn't be uncharted waters for you either. Everything we've shown in the comprehensive two-part lesson about
forms can be applied here as well. If we placed multiple form components of
different sizes one after another, we'd assign the
class to them in order to center them.
Similarly to the navigation component, the navigation in a navigation bar can
be also rewritten in a way that only the
<a> elements would
be used and the
<ul> list could be omitted. However, we
wouldn't be able to use Dropdown buttons in such
We can place any text inside a navbar as the
element with the
navbar-text class. The text centers vertically by
Navigation bars will hide when we decide to print the website. If we wanted
the navigation bar to be a part of the printed result, we'd assign the
d.print class to it.
The navigation bar comes in both light and dark versions, depending on our
selection we assign the
class. These classes style the button and the text color. Then, we set the color
of the bar itself using a class from background utilities.
Of course, we can set a completely custom background color to the navigation bar as well using a custom class or an inline style.
We can use position utilities to position the navigation bar. We're particularly interested in:
- Fixed position, when the navigation bar doesn't scroll
along the page but stays fixed in the same position. We can achieve this
behavior by assigning the
.fixed-bottomclass, depending on whether we want the bar to be sticked to the top or bottom side of the page. This functionally is used by relatively large amount of websites and allows the user to use the navigation bar anywhere on the page without having to scroll the page up.
- Sticky position is a very interesting innovation, but be
careful, it works in new browsers only (requires the support for the
position: stickyproperty and value in CSS). The navigation works as a regular element but as soon as we start scrolling, it sticks as if the position is fixed. The benefit of this solution is that we can place e.g. a large logo above the navigation which will scroll along the page while the navigation will stick to the top. The logo doesn't take any space this way and the navigation is still at close hand. We assign the
.sticky-topclass to the navigation bar to achieve this behavior .
In the next lesson, Bootstrap - Pagination, Alerts, and Breadcrumbs, we'll describe several other components: Pagination, Alerts, and Breadcrumb.
No one has commented yet - be the first!