Nav
Documentation and examples for how to use Bootstrap’s included navigation components. document
Base Nav
For light & Dark backgrounds use .nav-light, .nav-dark modifier classes. For alignments and vertical navigation please check official documentation.
Nav light
Use the .nav-light class with nav.
Nav dark
Use the .nav-dark class with nav.
Horizontal alignment
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned. Centered with .justify-content-center,.justify-content-end
Nav with icon
Use .nav-icon class with nav.
Nav with icon top
Use .nav-icon .nav-icon-top class with nav.
Nav pills
Use .nav-pills class with nav and .nav-pills-rounded,.nav-pills-square for shape of pills.
Nav pills icon
Use .nav-icon class with .nav-pills.
Nav pills icon top
Use .nav-icon .nav-icon-top class with nav.
Nav pills soft
Use .nav-pills-soft class with nav.
Nav line
Use .nav-line class with nav.
Vertical
Stack your navigation by changing the flex item direction with the .flex-column utility or add .nav-vertical class. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).
Vertical nav pills
Add .nav-vertical class with .nav-pills.
Vertical nav line
Add .nav-vertical class with .nav-line.
Vertical nav with icon
Add .nav-vertical class with .nav-pills.