Bootstrap4 Navs
📅 2026-06-23 | 📂 Bootstrap
If you want to create a simple horizontal navigation bar, you can add the .nav class to the
element, the .nav-item class to each - item, and the .nav-link class to each link:
## Example
[Try it »](#)
* * *
## Navigation Alignment
The .justify-content-center class is used to center the navigation, and the .justify-content-end class is used to right-align the navigation.
## Example
[Try it »](#)
* * *
## Vertical Navigation
The .flex-column class is used to create a vertical navigation:
## Example
[Try it »](#)
* * *
## Tabs
You can use the .nav-tabs class to transform the navigation into tabs. Then use the .active class to mark the selected tab.
## Example
[Try it »](#)
* * *
## Pills Navigation
The .nav-pills class can set the navigation items to be displayed as pills.
## Example
[Try it »](#)
* * *
## Justified Navigation
The .nav-justified class can set the navigation items to be displayed with equal width.
## Example
[Try it »](#)
* * *
## Pills with Dropdown
## Example
[Try it »](#)
* * *
## Tabs with Dropdown
## Example
[Try it »](#)
* * *
## Dynamic Tabs
If you want to make the tabs switchable, you can add the data-toggle="tab" attribute to each link. Then add the .tab-pane class to the content corresponding to each tab, and use the .tab-content class for the element containing the tab content.
If you want a fade effect, you can add the .fade class after .tab-pane:
## Example
[Try it »](#)
* * *
## Dynamic Pills
For dynamic pills, you just need to set the data-toggle attribute to data-toggle="pill" in the example above:
## Example
YouTip