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

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar