Bootstrap Navs
Navs provide a flexible way to build navigation lists of links, styled as simple tabs, pills, or plain lists. The base class is .nav applied to a <ul>, with .nav-item and .nav-link for each entry.
Add .nav-tabs for a tabbed look with a bottom border, or .nav-pills for rounded pill-shaped buttons — both are frequently paired with JavaScript to switch visible content panes.
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
</ul>Nav styles
.nav-tabs gives links a classic tabbed appearance with borders. .nav-pills gives links a rounded, button-like appearance. Add .active to mark the current selection.
Justified and vertical navs
Add .nav-fill or .nav-justified to make nav items equally fill the available width. Add .flex-column to stack nav items vertically, useful for sidebars.
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
</ul>A row of tab-style links with 'Home' shown as the active tabnav-tabs gives the links a bordered, tab-like appearance, and active highlights the current tab.
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">All</a></li>
<li class="nav-item"><a class="nav-link" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Completed</a></li>
</ul>A row of rounded pill-shaped links with 'All' highlightednav-pills styles links as rounded buttons rather than bordered tabs.
Key points
- .nav is the base class for navigation lists.
- .nav-tabs creates a bordered tab look.
- .nav-pills creates rounded, button-style links.
- .active marks the currently selected nav item.