/    /  Bootstrap Tabs and Pills

Bootstrap Tabs and Pills

 

The user can quickly access the content by switching between the panes without leaving the page.

 

Bootstrap Menus:

 

The Bootstrap menu is often defined in an unordered list <ul>. You have to add the .list-inline class to <ul> to create a horizontal menu.

 

Example:

 

<div class="container"> 
 <h3>Inline List</h3> 
 <ul class="list-inline"> 
  <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> 
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

Bootstrap Tabs:

 

Create a basic navigation tag with <ul class=”nav nav-tabs”>, and also mark the current page with <li class=”active”>.

 

Example:

 

<div class="container"> 
 <h3>Bootstrap Tabs</h3> 
 <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> 
 <br> 
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

Bootstrap Tabs with Dropdown Menu:

 

Tabs can also use the hold dropdown menu.

 

Example:

 

<div class="container"> 
 <h3>Tabs With Dropdown Menu</h3> 
 <ul class="nav nav-tabs"> 
  <li class="active"><a href="#">Home</a></li> 
  <li class="dropdown"> 
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">Submenu 1-1</a></li> 
    <li><a href="#">Submenu 1-2</a></li> 
    <li><a href="#">Submenu 1-3</a></li>                         
   </ul> 
   </li> 
   <li><a href="#">Menu 2</a></li> 
   <li><a href="#">Menu 3</a></li> 
 </ul> 
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

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.

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

 

Example:

 

<div class="container"> 
 <h2> Bootstrap Dynamic Tabs</h2> 
 <ul class="nav nav-tabs"> 
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
  <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
 </ul> 
 <div class="tab-content"> 
  <div id="home" class="tab-pane fade in active"> 
   <h3>HOME</h3> 
   <p>enter content here....</p> 
  </div> 
  <div id="menu1" class="tab-pane fade"> 
   <h3>Menu 1</h3> 
   <p>enter content2 here....</p> 
  </div> 
  <div id="menu2" class="tab-pane fade"> 
   <h3>Menu 2</h3> 
   <p>enter content3 here....</p> 
  </div> 
  <div id="menu3" class="tab-pane fade"> 
   <h3>Menu 3</h3> 
   <p>Tenter content3 here....</p> 
  </div> 
 </div> 
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

Pills:

 

Create pills with <ul class=”nav nav-pills”>, and  also mark the current page with <li class=”active”>.

 

Example:

 

<div class="container"> 
 <h3>Pills</h3> 
 <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> 
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

Bootstrap Vertical Pills:

 

If you want Pills displayed vertically, just add the .nav-stacked class.

 

Example:

 

<div class="container"> 
 <h3>Bootstrap Vertical Pills</h3> 
 <ul class="nav nav-pills nav-stacked"> 
  <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> 
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

Pills With Dropdown Menu:

 

Use dropdown menu with pills.

 

Example:

 

<div class="container"> 
 <h3>Pills With Dropdown Menu</h3> 
 <ul class="nav nav-pills nav-stacked"> 
  <li class="active"><a href="#">Home</a></li> 
  <li class="dropdown"> 
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">Submenu 1-1</a></li> 
    <li><a href="#">Submenu 1-2</a></li> 
    <li><a href="#">Submenu 1-3</a></li>                         
   </ul> 
  </li> 
  <li><a href="#">Menu 2</a></li> 
  <li><a href="#">Menu 3</a></li> 
 </ul> 
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

Centered Tabs and Pills:

 

Center or justify the tabs and pills, use the .nav-justified class.

 

Example:

 

<div class="container">
 <h3>Centered Tabs</h3>
 <ul class="nav nav-tabs nav-justified">
  <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>
 <br>
 <h3>Centered Pills</h3>
 <ul class="nav nav-pills nav-justified">
  <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>
</div>

 

OUTPUT:

 

Bootstrap Tabs and Pills

 

Bootstrap Toggleable Dynamic Pills:

 

Same as toggleable dynamic tabs; only change the data-toggle attribute to data-toggle=”pill”.

 

Example:

 

<div class="container"> 
 <h2>Dynamic Pills</h2> 
 <ul class="nav nav-pills"> 
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li> 
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li> 
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li> 
  <li><a data-toggle="pill" href="#menu3">Menu 3</a></li> 
 </ul> 
 <div class="tab-content"> 
  <div id="home" class="tab-pane fade in active"> 
   <h3>HOME</h3> 
   <p>enter content here1.......</p> 
  </div> 
  <div id="menu1" class="tab-pane fade"> 
   <h3>Menu 1</h3> 
   <p>enter content here2.......</p> 
  </div> 
  <div id="menu2" class="tab-pane fade"> 
   <h3>Menu 2</h3> 
   <p>enter content here3.......</p> 
  </div> 
  <div id="menu3" class="tab-pane fade"> 
   <h3>Menu 3</h3> 
   <p>enter content here4.......</p> 
  </div> 
 </div> 
</div>

 

OUTPUT:

 

BS tabs