Bootstrap Tabs & Pills

1) Tabs

Tabs are use to <ul class="nav nav-tabs"> for navigation tabs and current page Active use the <li class="active">.

Example:-

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

Test it Now

Bootstrap Tabs With Dropdown Menu

Example:-

 <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 A</a></li>
      <li><a href="#">Submenu B</a></li>
      <li><a href="#">Submenu C</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  </ul>

Test it Now

Bootstrap Pills

To use the <ul class="nav nav-pills"> for pills menu and current page with
<li class="active">

Example:-

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

Test it Now

Bootstrap Pills With Dropdown Menu

Example:-

 <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 A</a></li>
      <li><a href="#">Submenu B</a></li>
      <li><a href="#">Submenu C</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Test it Now

Next Topic

← prev next →

Bootstrap 4 Tuto

Bootstrap Tabs & Pills

1) Tabs

Bootstrap Tabs With Dropdown Menu

Bootstrap Pills

Bootstrap Pills With Dropdown Menu