Bootstrap Tabs and Pills

Menus

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:

<ul>  <li><a href="#">Home</a></li>  <li><a href="#">Menu 1</a></li>  <li><a href="#">Menu 2</a></li>  <li><a href="#">Menu 3</a></li></ul>

Tabs

• 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:

<ul class="nav nav-tabs">  <li class="active"><a href="#">Home</a></li>  <li><a href="#">Menu 1</a></li>  <li><a href="#">Menu 2</a></li>  <li><a href="#">Menu 3</a></li></ul>

Pills

Pills are created with <ul class="nav nav-pills">. Also mark the current page with <li class="active">:

<ul class="nav nav-pills">  <li class="active"><a href="#">Home</a></li>  <li><a href="#">Menu 1</a></li>  <li><a href="#">Menu 2</a></li>  <li><a href="#">Menu 3</a></li></ul>