bootstrap-4-navbar

Day 10: Bootstrap 4 Navbar Tutorial and Examples

 

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:

Let’s start learning about navigation in Bootstrap 4!

bootstrap-4-navigation-start

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:

dark



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.

dark


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:

The resulting navbar will look like this:

dark

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.

dark



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:

dark


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:

dark


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.

dark


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.

dark



You can also use the image as the anchor for a dropdown (showing the pages that the user can access if logged in).

dark


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:

dark



And you can use different variations for inputs and buttons:

dark



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.

dark



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.

dark


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:

dark



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.

dark



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:

dark

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.

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:

dark



You can use the border radius utilities from day 5 to round the corners and make it look nicer:

dark


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:

dark



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.

dark


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:

dark



Or we can use a gradient:

dark


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:

dark


Fixed Bottom

Or you can always place it at the bottom of the page with the .fixed-bottom class.

dark



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.

dark



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.

bootstrap-4-navbar-end

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:

 

 

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.