Loading. Please Wait.

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