Bootstrap Tabs and Pills

Bootstrap Menus

Bootstrap menu is used to create different types of menu. It can created horizontal with its .list-inlineclass.
<div class="container">    
  <h3>Example of Bootstrap Menu</h3>    
  <ul class="list-inline">    
    <li><a href="#">Home</a></li>    
    <li><a href="#">About</a></li>    
    <li><a href="#">Contact</a></li>    
    <li><a href="#">services</a></li>    
  </ul>    
</div>
Try Now

Bootstrap Tabs

Bootstrap tabl is look like is menu but there is some difference. We can create a basic navigation tag with <ul class="nav nav-tabs">. You can mark the current page with <li class="active">. Let us see an example of Bootstrap Tabs:
<div class="container">  
  <h3>Example of  Tabs</h3>  
  <ul class="nav nav-tabs">  
    <li class="active"><a href="#">Home</a></li>  
    <li><a href="#">Service</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Contact</a></li>  
  </ul>  
</div>
Try Now

Bootstrap Tabs with Dropdown Menu

We can create tabs with the dropdown menu. Let us see an example of Bootstrap Tabs with Dropdown Menu:
<div class="container">  
  <h3>Example of  Tabs</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="#">Tutorial  
    <span class="caret"></span></a>  
    <ul class="dropdown-menu">  
      <li><a href="#">HTML</a></li>  
      <li><a href="#">Bootstrap</a></li>  
    </ul>  
  </li>  
    <li><a href="#">Service</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Contact</a></li>  
  </ul>  
</div>
Try Now

Bootstrap Pills

We can create pills with the help of <ul class="nav nav-pills">. By default it is supported horizontal. Let us see an example of Bootstrap Pills:
<div class="container">  
  <h3>Example of  Pills</h3>  
  <ul class="nav nav-pills">  
    <li class="active"><a href="#">Home</a></li>  
    <li><a href="#">Service</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Contact</a></li>  
  </ul>  
</div>
Try Now

Bootstrap Vertical Pills

We can create vertical pill by using .nav-stacked class.
<div class="container">  
  <h3>Example of Vertical Pills</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="#">Tutorial  
    <span class="caret"></span></a>  
    <ul class="dropdown-menu">  
      <li><a href="#">HTML</a></li>  
      <li><a href="#">Bootstrap</a></li>  
    </ul>  
  </li>  
    <li><a href="#">Service</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Contact</a></li>  
  </ul>  
</div>
Try Now

Note : We can create center/justify Tabs and pills by using .nav-justified class.

Bootstrap Dynamic Pills

Bootstrap Dynamic Pills is same as dynamic toggleable tabs but there is some difference that can be understand by its example. Example
<div class="container">  
  <h2>Example of 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">Service</a></li>  
    <li><a data-toggle="pill" href="#menu2">About</a></li>  
    <li><a data-toggle="pill" href="#menu3">Contact</a></li>  
  </ul>    
  <div class="tab-content">  
    <div id="home" class="tab-pane fade in active">  
      <h3>HOME</h3>  
     <p>Welcome to <strong>Home Page</strong>. Today we are learning Bootstrap Tutorial.</p>  
    </div>  
    <div id="menu1" class="tab-pane fade">  
      <h3>Services</h3>  
      <p>Welcome to our<strong> Service Page</strong>. We provides a lots of services.</p>  
    </div>  
    <div id="menu2" class="tab-pane fade">  
      <h3>About</h3>  
     <p>Welcome to<strong> About Page.</strong> We provides a lots of services.</p>  
    </div>  
    <div id="menu3" class="tab-pane fade">  
      <h3>Contact</h3>  
      <p>You can <strong> Contact us.</strong></p>  
    </div>  
  </div>  
</div>
Try Now



ADVERTISEMENT
ADVERTISEMENT