Bootstrap Tabs and Pills

Most web pages have some kind of a menu.
In HTML, a menu is often defined in an unordered list <ul> (and styled 
afterwards), like this:
If you want to create a horizontal menu of the list above, add the 
.list-inline class to <ul>:
Or you can display the menu above with Bootstraps' Tabs and Pills (see 
below).
Note: See the last example on this page to find out how to make tabs and pills toggleable/dynamic.
Home
Menu 1
Menu 2
Menu 3
Tabs are created with <ul class="nav nav-tabs">:
Tip: Also mark the current page with <li class="active">.
The following example creates navigation tabs:
Home

Menu 1
    

Submenu 1-1
Submenu 1-2
Submenu 1-3


Submenu 1-1
Submenu 1-2
Submenu 1-3
Menu 2
Menu 3
Tabs can also hold dropdown menus.
The following example adds a dropdown menu to "Menu 1":
Home
Menu 1
Menu 2
Menu 3
Pills are created with <ul class="nav nav-pills">. Also mark the current page with 
<li class="active">:
Home
Menu 1
Menu 2
Menu 3
Pills can also be displayed vertically. Just add the .nav-stacked class:
Text...
Text...
Text...
Home
Menu 1
Menu 2
Menu 3
The following example places the vertical pill menu inside the last column. 
So, on a large screen the menu will be displayed to the right. But on a small 
screen, the content will automatically adjust itself into a single-column 
layout:
Home

Menu 1
    

Submenu 1-1
Submenu 1-2
Submenu 1-3


Submenu 1-1
Submenu 1-2
Submenu 1-3
Menu 2
Menu 3
Pills can also hold dropdown menus.
The following example adds a dropdown menu to "Menu 1":
Home
Menu 1
Menu 2
Menu 3
To center/justify the tabs and pills, use the .nav-justified class.
Note that on screens that are smaller than 768px, the list items are stacked 
(content will remain centered):
Home
Menu 1
Menu 2
Menu 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
To make the tabs toggleable, 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.
If you want the tabs to fade in and out when clicking on them, add the 
.fade class to .tab-pane:
The same code applies to pills; only change the data-toggle 
attribute to data-toggle="pill":
Add the required class to create a Tab Menu.
<ul class="">
  <li><a href="#">Home</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>

Start the Exercise
For a complete reference of all navigation classes, go to our complete
Bootstrap Navigation Reference.
For a complete reference of all tab options, methods and events, go to our
Bootstrap JS Tab Reference.
We just launchedW3Schools videos
Get certifiedby completinga course today!
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
help@w3schools.com
Your message has been sent to W3Schools.