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
Horizontal alignment
The base .nav component is built with flexbox and provide a
strong foundation for building all types of navigation components. It includes
some style overrides (for working with lists), some link padding for larger
hit areas, and basic disabled styling.
Centered with .justify-content-center:
Right-aligned with .justify-content-end:
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).
Tabs
Takes the basic nav from above and adds the .nav-tabs class to
generate a tabbed interface. Use them to create tabbable regions with
tab JavaScript plugin
.
Tabs
Takes the basic nav from above and adds the .nav-tabs
class to generate a tabbed interface. Use them to create tabbable
regions with our tab JavaScript plugin.
Pills
Take that same HTML, but use .nav-pills instead:
Tabs with dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.