Base nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

Pills

Take that same HTML, but use .nav-pills instead.

Underline

Take that same HTML, but use .nav-underline instead.

Fill and justify

Force your .nav’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

For equal-width elements, use . All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.

Nav plain

.nav-plain remove the background color on .active and keeps the padding smaller compared to the other variants.