Base nav
Roll your own navigation style by extending the base .nav component. All Bootstrap’s nav components are built on top of this by specifying additional styles.
Nav with Border
To wrap with border, use .wrap-border class.
Nav with Icon
Nav with Pills
Horizontal alignment Options
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.
Justify Content Start
with .justify-content-start class.
Justify Content Center
Centered with .justify-content-center class.
Justify Content End
with .justify-content-end class.
Vertical Navs
Stack your navigation by changing the flex item direction with the .flex-column utility
Base nav
Roll your own navigation style by extending the base .nav component. All Bootstrap’s nav components are built on top of this by specifying additional styles.
Nav with Border & Divider
To add divider, use .dropdown-divider class to <li>
Navs with Labels & Label pills
With Label
To add label to nav, use .badge.badge-COLOR classes.
- New Heading 1
- Active Area
- Clickable Area
- Clickable Area
- Heading 2 beware
- Clickable Area
With Label Pills
To add label pill to nav, use .badge.badge-pill.badge-COLOR classes.
- 5 Heading 1
- Active Area
- Clickable Area
- Clickable Area
- Heading 2 7
- Clickable Area
With Label for links
- New Heading 1
- Active Area 6
- Clickable Link 7
- Clickable Link 9
- Heading 2 Info
- Clickable Link 5
- Clickable Link 6
With Label Pills for links
- Notifications Heading 1
- Active Area 6
- Clickable Link 5
- Clickable Link 7
- Heading 2 Available
- Clickable Link Offline
- Clickable Link Online