Bootstrap Tabs and Pills

Bootstrap Menus

Menus are used in most of the web pages. These are defined in an unordered list <ul>. You have to add the .list-inline class to <ul> to create a horizontal menu.

See this example:

Bootstrap Tabs

You can create a basic navigation tag with <ul class="nav nav-tabs">. You can also mark the current page with <li class="active">.

The following example specifies how to create a simple navigation tab.

See this example:

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

See this example:

Bootstrap Toggleable / Dynamic Tabs

Add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content, to make tags toggleable.

If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane .

See this example:

Bootstrap Pills

You can create pills with <ul class="nav nav-pills">. You can also mark the current page with <li class="active">.

See this example:

Bootstrap Vertical Pills

Add the .nav-stacked class to display the pills vertically.

See this example:

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

See this example:

Bootstrap Toggleable Dynamic Pills

It is same as toggleable dynamic tabs, the only change is the data-toggle attribute to data-toggle="pill" .

See this example: