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>

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>

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>

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>

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>