Bootstrap 3 Navs

Add navigation tabs and pills easily with Bootstrap's .nav class.

Bootstrap's .nav class (and associated classes) lets you turn a list into tabs and navigation "pills".

To add a tab or nav pill, add the .nav class and either .nav-pills or .nav-tabs to a <ul> element containing the list of navigation items.

Tabs

Add class="nav nav-tabs" to the <ul> element containing the list of navigation items.

Also use class="active" to make a tab the selected tab.

 
<ul class="nav nav-tabs">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Preview</a></li>
</ul>

View Output

Pills

Change nav-tabs to nav-pills to display pills instead.

xxxxxxxxxx
 
<ul class="nav nav-pills">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Preview</a></li>
</ul>

View Output

Vertical Pills

You can stack pills vertically by adding .nav-stacked to the class list.

xxxxxxxxxx
 
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Preview</a></li>
</ul>

View Output

Justified Navs

You can justify tabs and pills by adding .nav-justified.

If the tabs are stacked on top of each other in this example, it is because the viewport is small. Try viewing the preview in a new window to see how it appears on a larger viewport. If they are still stacked, you may need to view this on a larger device.

xxxxxxxxxx
 
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Preview</a></li>
</ul>

View Output

Disabled Links

You can add Bootstrap's .disabled class to make a tab or pill appear to be disabled.

Note that this only makes the nav look disabled. It doesn't actually disabled any <a> functionality, so you will need to use other means to actually disable that element (such as JavaScript).

xxxxxxxxxx
 
<ul class="nav nav-tabs">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li class="disabled"><a href="#">JavaScript</a></li>
<li><a href="#">Preview</a></li>
</ul>

View Output

Tabs with Dropdown Menus

You can add a dropdown menu to a tab or pill. In this case, the .dropdown class is applied to a <li> element (not a <div> element).

Tabs

​x
 
<ul class="nav nav-tabs">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
​
<!-- Dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Preview
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="Preview">
<li><a href="#">Mobile Phone</a></li>
<li><a href="#">Tablet</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Desktop</a></li>
</ul>
</li>
​
</ul>

View Output

Pills

xxxxxxxxxx
 
<ul class="nav nav-pills">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
​
<!-- Dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Preview
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="Preview">
<li><a href="#">Mobile Phone</a></li>
<li><a href="#">Tablet</a></li>
<li><a href="#">Laptop</a></li>
<li><a href="#">Desktop</a></li>
</ul>
</li>
​
</ul>

View Output