Bootstrap Tabs and Pills

Bootstrap Navs and Pills use to create different type of navigation’s for our website.

This is Unordered list in html and we add css to make menu.

<ul>
  <li><a href="#">List1</a></li>
  <li><a href="#">List2</a></li>
  <li><a href="#">List3</a></li>
  <li><a href="#">List4</a></li>
</ul>

in bootstrap there are already classes for create menu. if we want to create Horizontal Menu then we have to add .list-inline in our <ul>

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

See Demo

Bootstrap Tabs

We can create Horizontal tabs by using class .nav-tabs.

We can Also mark the current page with <li class="active">.

 <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="#">Link</a>
      </li>
     <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
     </li>
   </ul>

See Demo

Nav Tabs With Dropdown Menu

We can add Dropdown nav in nav tab by suing class . dropdown in <li>

 <ul class="nav nav-tabs">
      <li class="active"><a href="#">Nav-1</a></li>
      <li class="dropdown">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Nav-2
        <span class="caret"></span></a>
         <ul class="dropdown-menu">
           <li><a href="#">Dropdown Nav-1</a></li>
           <li><a href="#">Dropdown Nav-2</a></li>
           <li><a href="#">Dropdown Nav-3</a></li>
        </ul>
       </li>
    <li><a href="#">Nav-3</a></li>
    <li><a href="#">Nav-4</a></li>
  </ul>

See Demo

Bootstrap Pills

We can create Pills by using class <ul class=”nav nav-pills”> and we can add current active class using <li class=”active”>

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

See Demo

Bootstrap Vertical Pills

By using class .nav-stacked we can create vertical pills.

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

See Demo