Bootstrap 4 Components
Navs
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.
Styles
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.
Tabs
To give your nav a tabbed look, use .nav-tab.
Pills
.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-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.
