Hey and welcome to the 10th day of Bootstrap 4 💁🏻 Today we will learn about the Bootstrap 4 Navigation Bar. This is an essential part of every page and tricky to create on your own, especially with a different behaviour for mobile. In this article we will see the Bootstrap 4 classes to create a navbar and add elements such as the brand, links, text, images and form. We will also go through options for colouring, placement and responsive behaviour.
The article will be split into the following parts:
- Bootstrap 4 Navbar Elements
- Positioning Items Inside the Navbar
- Using Bootstrap 4 Containers
- Colouring the Bootstrap 4 Navbar
- Bootstrap 4 Navbar Placement
- Further Reading
Let’s start learning about navigation in Bootstrap 4!
Photo credit to Gal Shir for his shot.
Bootstrap 4 Navbar Elements
The navigation header, or the navbar, should be created using the <nav> tag or a <div> tag with the role=”navigation” attribute. In order to get the Bootstrap 4 styling, you will need the basic class called .navbar. By default, the navbar takes up the whole width of the screen and acts like a Bootstrap 4 flex container. Let’s see what elements we can add to it.
Bootstrap 4 Navbar Brand
The first element that usually sits in a navbar is the brand. To make it stand out from the rest of elements in the navbar, you need the .navbar-brand class. You can use it with links or other tags (such as <span>, <h[size]>, <div>). Here is how it looks:
<nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">BootstrapBay</a> </nav> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1">BootstrapBay</span> </nav>
Side note: Besides the .navbar-class, I have also used 2 classes for colouring the navbar, I will explain them in the next section of the article.
You can also place a logo inside the .navbar-brand.
<nav class="navbar navbar-light bg-light mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
</a>
</nav>
<nav class="navbar navbar-light bg-light mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
</nav>
Bootstrap 4 Navbar Link Lists
The next thing commonly found in navigation bars after the brand is a list of links horizontally aligned. To make use of the Bootstrap 4 design, you should add the .navbar-nav class to the <ul> list of elements and the .nav-item class to each element. The links should get the .nav-link class. Here is the code for a navbar with a list of 3 links:
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo" class="align-bottom">
BootstrapBay
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</nav>
The resulting navbar will look like this:
This is not what we are actually trying to do since we want a horizontal list of links. In order to get there, we need to understand this default behaviour. The list of links appears vertically because this is the behaviour for mobile devices (and Bootstrap 4 is a mobile-first library). So this appearance is by design. But, even so, this behaviour is not entirely what we want for mobile devices. Since it will take up most of the space on a mobile display, the common practice is to have a toggle button that collapses the menu.
In order to be able to toggle the list of links on mobile, we need to wrap it in a div with the classes .collapse and .navbar-collapse and also assign to it an unique id. And we need a toggler that triggers the collapse action for the list with the given id.
<nav class="navbar navbar-dark bg-dark mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
The toggler button needs the .navbar-toggler class and the data-toggle=”collapse” attribute together with the target id data-target=”[id]” to work.
Side Note: Be sure you have Popper.js included in your file for the collapse to work. You can take another look at Day 1: Bootstrap 4 CDN and Starter Template to see how to include the necessary Javascript.
Bootstrap 4 Responsive Navbars
If we leave the Bootstrap 4 navbar like that, it will also show the responsive behaviour. Regardless of the screen resolution you are on, you will see a burger menu button and when you press it, you will see the list of links arranged vertically. But, if you want to show the links in a horizontal format, you can do that by specifying the breakpoint where you want to start seeing this behaviour with the class .navbar-expand-[breakpoint]. So, if you want for the menu to be horizontal starting with large mobile devices, you will need the .navbar-expand-sm class. For a breakpoint reference please check out the Bootstrap 4 breakpoints.
Here is an example with a navbar list that is horizontal starting with the tablet resolution:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-2">
<ul class="navbar-nav">
...
</ul>
</div>
</nav>
Bootstrap 4 Navbar Dropdown
You can add dropdowns to the navbar. You will need for the .dropdown class to be placed together with the .nav-item class. This element will contain both the dropdown toggler and the dropdown menu. The toggler needs the .nav-link class (the same as any other link in the navbar) and the .dropdown-menu has the standard syntax.
Here is an example:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-3" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-3">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Bootstrap 4 Navbar Text
If you want to display text in the navbar, you can use the .navbar-textclass which will make sure the text is vertically aligned in the navbar.
<nav class="navbar navbar-dark bg-dark navbar-expand-sm mt-3">
<a class="navbar-brand" href="#">
<img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/logo_white.png" width="30" height="30" alt="logo">
BootstrapBay
</a>
<span class="navbar-text">
Hey, there!
</span>
</nav>
Bootstrap 4 Navbar Images
Oftentimes, I needed to show images in the navbar as thumbnails for logged in users. You can do this by using the Bootstrap 4 border utilities and alignment utilities. To see them detailed, you can go to Day 5: Bootstrap 4 Images Tutorial and Examples.
<nav class="navbar navbar-dark bg-dark navbar-expand-sm mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<span class="custom-navbar-image">
<img src="..." width="40" height="40" class="rounded-circle">
</span>
</nav>
You can also use the image as the anchor for a dropdown (showing the pages that the user can access if logged in).
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-4" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-4">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="..." width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
Bootstrap 4 Navbar Forms
Another element you may need in the navbar is a form. Since the navbar doesn’t have much space vertically, the .form-inline is a good fit. Here is an example of an inline search form:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<form class="form-inline">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-info" type="submit"><i class="fas fa-search"></i></button>
</form>
</nav>
And you can use different variations for inputs and buttons:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<form class="form-inline">
<div class="input-group input-group-sm mr-2">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<button class="btn btn-info btn-sm" type="submit"><i class="fas fa-search"></i></button>
</form>
</nav>
In this example we have used input groups with small dimensions and small buttons. To see more options for form elements you can go back to Bootstrap 4 buttons tutorial, Bootstrap 4 inputs tutorial and Bootstrap 4 forms tutorial.
Positioning Items Inside the Navbar
Like I said in the beginning of the article, the navbar acts like a Bootstrap 4 flex container. One of things that you need to keep in mind is that the responsive behaviour has the flex direction set to .justify-content-between and the expanded behaviour has the flex direction set to .justify-content-start. This is because on mobile devices, the generally wanted behaviour is to have the brand on the left and the toggler button on the right. You can make use of the default behaviour or you can modify it.
In the next examples we will illustrate use cases for the expanded version (on mobile there are not many options to position to toggler button).
Using Margin Auto
Let’s start with pulling the menu with the links to the right. We can do this by applying the .ml-auto on the .navbar-nav element.
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-5">
<ul class="navbar-nav ml-auto">
...
</ul>
</div>
</nav>
The collapsable element is also a flex container that grows into the whole space it can take. To align elements inside it, you can also use flex classes. So we can position the .navbar-nav inside the .collapse using the .justify-content-end class.
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-6">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbar-list-6">
<ul class="navbar-nav">
...
</ul>
</div>
</nav>
Using Bootstrap 4 Flex Utilities
Let’s also add some text and position the list of links and the text on opposite ends. If we will place both elements in the .collapse div we can add the .justify-content-between class to the .collapse. The result will look like this:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbar-list-7">
<ul class="navbar-nav">
...
</ul>
<span class="navbar-text">
Hey, there!
</span>
</div>
</nav>
And we can also add other elements, like a form and image. In the next example, we want for 2 elements to be pulled to the right: a search form and a dropdown with an image. Because we want to cluster them together we will place them together in the same div. And since we want these 2 elements aligned horizontally, we will make their parent div a flex container too.
<nav class="navbar navbar-dark bg-dark navbar-expand-sm mt-3">
<a class="navbar-brand" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-8" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbar-list-8">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
<div class="right-side d-flex">
<form class="form-inline">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-info" type="submit"><i class="fas fa-search"></i></button>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="..." width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Side note: We could have also let all 3 elements be direct children of the navbar: the link list, the search form and the image and add the .ml-auto class to the search form. In this way the search form and all elements following would have been placed to the right. You can choose what way you prefer.
There are many options to mix and match the elements and their positioning. As long as you understand how the Bootstrap 4 flex works, there isn’t anything you shouldn’t be able to do. If you are unsure about how to achieve something, please go to Day 3: Bootstrap 4 Flex Tutorial and Examples and also ask me in the comments and I will try to inspect it.
Complex Bootstrap 4 Navbar
Our final example for positioning elements in the navbar is a bit more difficult and I had take it step by step to create it. Here is how it looks:
Side note: In order to see how the navbar looks on larger screens, you can choose 0.5X in the CodePen iframe or you can open it in a separate window.
<nav class="navbar navbar-dark bg-dark navbar-expand-lg justify-content-between mt-3">
<button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbar-list-9" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100 order-3 order-lg-1" id="navbar-list-9">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-lg-0 order-1 order-lg-2" href="#">
<img src="..." width="30" height="30" alt="logo">
BootstrapBay
</a>
<div class="collapse navbar-collapse justify-content-end w-100 order-3" id="navbar-list-9">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="..." width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
Firstly, the explanation for the mobile version: like I mentioned before, the navbar acts like a flex container with .justify-content-between as alignment for the elements. We have also added this specific class for the larger screens positioning.
The collapsable menu doesn’t appear by default, so we only need to specify in what order the brand and the toggler button get displayed (so we added the .order-1 class to the brand and .order-2 class to the toggler). Since we have parts of the collapsable menu before and after the toggler and brand, we needed to specify that the collapsable menu has .order-3. In this way, when it is collapsed, it will show after the first 2 elements. You can see that the collapsable menu can appear multiple times. All the elements from everywhere it appears will show when it collapses.
Secondly, we handle how the navbar looks on larger screens (starting with the lg breakpoint for us). The idea is to have the brand centered in the middle and the lists of links pushed to the left and right. We do this by specifically adding to the navbar the .justify-content-betweenclass.
We will need to specify the new order for the elements on these screens. So, we give the .order-lg-1 class to the list of links, .order-lg-2 to the brand and .order-lg-3 to the image with the dropdown.
Since we want the brand to be centered, we will need the elements on the left and on the right to have the same width. That is why we added the .w-100 class to both of them. In this case, it will make both elements take as much as they can (dividing the whole of the navbar minus the width of the brand to the two of them). This will get the brand stuck in the center.
Since the .navbar-brand has some styling that interferes with positioning (it has a margin-right), we can overwrite that with .mx-lg-0. And that is all. The process is not that easy, but with enough attention, you will get to the desired effect.
Using Bootstrap 4 Containers
If you don’t want the navbar to go end-to-end on screens, you can place it in a Bootstrap 4 container:
<div class="container"> <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> ... </nav> </div>
You can use the border radius utilities from day 5 to round the corners and make it look nicer:
<div class="container"> <nav class="navbar navbar-dark bg-dark navbar-expand-sm rounded"> ... </nav> </div>
Placing Containers in Bootstrap 4 Navbars
You can also choose to have the navbar go end-to-end but have the content placed inside a container:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <div class="container"> ... </div> </nav>
You need to keep in mind that if you use a container in a navbar, it will only work for resolutions equal or higher to the breakpoint you specified for expanding. On mobile screens, it will not show so the elements inside don’t get a double padding.
Colouring the Bootstrap 4 Navbar
Bootstrap 4 Navbar Classes
In order to color the navbar, you can use the navbar theming classes and the background utilities. There are 2 navbar classes: .navbar-light and .navbar-dark. They don’t add a background color to the navbar so that is why you have to also add a background utility. Their purpose is colouring the elements inside the navbar. You could also use the text utilities, but they will not cover all the elements found in a navbar (like links).
So, when you use a dark background utility, you will need the .navbar-dark class so the elements in the navbar appear white (or a variation of white). And when you use a light background utility, you will need the .navbar-light class so the elements appear black (or a variation).
Bootstrap 4 Background Utilities
Here are the options that you can choose from using the background utilities.
<nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-dark bg-info"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-dark bg-success"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-dark bg-danger"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-light bg-warning"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-dark bg-secondary"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-light bg-white"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav> <nav class="navbar navbar-light bg-transparent"> <a class="navbar-brand" href="#a">BootstrapBay</a> </nav>
Custom Classes
If the Bootstrap 4 options are not what you are looking for, you can overwrite one of the classes with the colour you desire. Or you can create your own class for the colour you need:
//html
<nav class="navbar navbar-dark bg-custom-1 mt-1">
<a class="navbar-brand" href="#a">BootstrapBay</a>
</nav>
//css
.bg-custom-1 {
background-color: #85144b;
}
Or we can use a gradient:
//html
<nav class="navbar navbar-dark bg-custom-2">
<a class="navbar-brand" href="#a">BootstrapBay</a>
</nav>
//css
.bg-custom-2 {
background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}
Bootstrap 4 Navbar Placement
The default behaviour for the navbar on scroll is to move with the rest o the page.
Fixed Top
If you want the navbar to be visible at all times, you can choose to always place it at to the top with the .fixed-top class:
<nav class="navbar navbar-dark fixed-top bg-custom-2">
<div class="container">
<a class="navbar-brand" href="#a">BootstrapBay</a>
</div>
</nav>
Fixed Bottom
Or you can always place it at the bottom of the page with the .fixed-bottom class.
<nav class="navbar navbar-dark fixed-bottom bg-custom-2">
<div class="container">
<a class="navbar-brand" href="#a">BootstrapBay</a>
</div>
</nav>
Both the .fixed-top and .fixed-bottom classes make the navbar have an absolute positioning, meaning it will overlap with other elements on the page. You may need to adjust the other elements to show the page properly.
Sticky Top
Another way to fix the navbar on top is to add the .sticky-top class that makes it sticky. Having the position for an element be sticky is very similar to having it fixed. The difference is that the element is not positioned with absolute. It stay in its place on the page until it needs scrolling.
<nav class="navbar navbar-dark sticky-top bg-custom-2">
<div class="container">
<a class="navbar-brand" href="#a">BootstrapBay</a>
</div>
</nav>
Here is a Codepen that shows the difference between a fixed element and a sticky one: https://codepen.io/nyctophiliac/pen/xpmpypAlthough this is a convenient utility, it is not still fully supported in all browsers, so make sure to test and see if your navbar breaks. If it does, it is probably for the best to use a fixed position.
And this is all for today. We tried to cover all the classes that Bootstrap 4 provides for the navbar. As you were able to see, besides understanding and using these classes, you need to have a strong foundation in how the Bootstrap 4 flex works. Hopefully, you are now confident in your navigation skills and can easily create navigation bars using Bootstrap 4.
Photo credit to Bettina Hoeber for her shot.
Further Reading
All the examples used in this article are available at CodePen. You can easily modify and create your own navbar based on them. And if you have some time to spare, I recommend the following resources:
Photo credit to Ranganath Krishnamani for their shot.
