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.


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.


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

Vertical Pills

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

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.

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).

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).