Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Tabs
Note the .nav-tabs class requires the .nav base class.
Example
Tabs Justified
Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.
Examples
Tabs with Dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Example
Tabs Alternative
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Example
Pills
Take that same HTML, but use .nav-pills instead:
Example
Pills Justified
Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.
Examples
Pills Stacked
Pills are also vertically stackable. Just add .nav-stacked.
Example
Disabled Links
For any nav component (tabs or pills), add .disabled for gray links and no hover effects.
Examples
Pills with Dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Examples
