Bootstrap Tabs and Pills

Bootstrap provides tabs and pills to organize content efficiently.

Important Note
Use tabs for switching between different sections and pills for menu-like navigation.

Menus

Bootstrap tabs use nav and nav-tabs classes to create tabbed navigation.

Tabs

Example:

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

Output:

Tabs With Dropdown Menu

Dropdowns can be added inside tabs.

Example:

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Option 1</a></li>
    </ul>
  </li>
</ul>

Output:

Pills

Pills are an alternative to tabs and use nav-pills class.

Example:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
</ul>

Output:

Vertical Pills

Pills can also be displayed vertically. Just add the .nav-stacked class.

Example:

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

Output:

Centered Tabs and Pills

To center, use nav-justified class.

Example:

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

Centered Pills

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

Toggleable / Dynamic Tabs & Pills

Example:

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">Content</div>
</div>

Conclusion

Bootstrap makes web development easy with its powerful components. In this blog, we learnt about Panels, Dropdowns, Collapse, and Tabs can help you build a professional website quickly. In our next blog, we will cover Navigation Bars, Forms, Bootstrap Inputs, Inputs 2, and more. Stay tuned for more exciting Bootstrap tutorials that will enhance your front-end development skills!

Request more information

Bootstrap Tabs and Pills