Bootstrap 4 Components


Bootstrap’s .nav class allows us to turn a list item into a navigation.

Base Nav

Use class .nav in an unordered list to create a navigation. Add a link with an anchor element with class .nav-link inside a list item with class .nav-item. This will create a base nav.


There are many utility and modifier classes to change the alignment of the .nav elements. By default, nav elements are aligned to the left of the page.

Horizontal Alignment

The default behavior of nav element is to sit at the left of the page. To change the alignment to the center horizontally use the .justify-content-center.

To align the nav to the right use the class .justify-content-end.

Vertical Alignment

If horizontal alignment is not fitting to your page you can always stack the navs vertically. .flex-column does just that.


To give your nav a tabbed look, use .nav-tab.


.nav-pills is another way to style your nav elements.

Fill and justify

Using .nav-fill with .nav fill the content into the entire available space of the .nav-item. But the width each nav item occupies is not uniform. .nav-justified is there to do just that. It fills the entire available horizontal width and all the nav elements have the same width.

Using Dropdowns

You can add dropdown menu to you nav items. Just add a  dropdown as nav item.