How to use Bootstrap's tabs and pills components to create navigation tabs

One of the most commonly used components in Bootstrap is the tabs and pills component, which allows developers to create navigation tabs that are both functional and visually appealing. In this tutorial, we will take a detailed look at how to use Bootstrap's tabs and pills components to create navigation tabs.

Basic tab structure

First, let's take a look at the basic structure of a Bootstrap tab. The HTML for a Bootstrap tab consists of three main parts: a parent element with a class of "nav", a child element with a class of "nav-tabs" or "nav-pills", and one or more child elements with a class of "nav-item". Each "nav-item" element should contain a link with a class of "nav-link". Here's an example of the basic structure of a Bootstrap tab:

<nav class="nav">
  <div class="nav-tabs">
    <div class="nav-item">
      <a class="nav-link" href="#">Tab 1</a>
    </div>
    <div class="nav-item">
      <a class="nav-link" href="#">Tab 2</a>
    </div>
    <div class="nav-item">
      <a class="nav-link" href="#">Tab 3</a>
    </div>
  </div>
</nav>

The above HTML code creates a simple navigation tab with three tabs labeled "Tab 1", "Tab 2", and "Tab 3". The "nav-tabs" class is used to create the tabbed navigation, and the "nav-link" class is used to style the individual tabs.

In order to make the tabs functional, you will also need to add an ID to each tab, and a corresponding ID to the content that you want to appear when that tab is selected. For example:

<nav class="nav">
  <div class="nav-tabs">
    <div class="nav-item">
      <a class="nav-link" href="#tab1">Tab 1</a>
    </div>
    <div class="nav-item">
      <a class="nav-link" href="#tab2">Tab 2</a>
    </div>
    <div class="nav-item">
      <a class="nav-link" href="#tab3">Tab 3</a>
    </div>
  </div>
</nav>

<div id="tab1">
  <p>Content for tab 1 goes here.</p>
</div>
<div id="tab2" style="display:none">
  <p>Content for tab 2 goes here.</p>
</div>
<div id="tab3" style="display:none">
  <p>Content for tab 3 goes here.</p>
</div>

The above code will make each tab function so that when it is clicked, it will display the corresponding content and hide the other tabs' content. To make the first tab active by default, you can use the class "active" on the appropriate nav-item and show the corresponding tab content.

Customisation

In addition to the basic functionality of the tabs, Bootstrap also provides several options for customizing the appearance of the tabs. For example, you can use the "nav-tabs" class to create horizontal tabs, or you can use the "nav-pills" class to create vertical tabs. You can also use the "nav-fill" class to make the tabs stretch to fill the entire width of the parent container, or the "nav-justified" class to make the tabs have equal widths.

You can also customize the color of the tabs by adding one of Bootstrap's contextual classes, such as "nav-tabs-primary" or "nav-tabs-secondary", to the parent "nav" element. You can also use the "nav-tabs-light" and "nav-tabs-dark" classes to adjust the background color of the tabs.

Another useful feature of the Bootstrap tabs and pills component is the ability to add dropdown menus to individual tabs. To add a dropdown menu to a tab, you will need to add a "dropdown" class to the "nav-item" element, and add a link with a class of "nav-link" and a "data-toggle" attribute set to "dropdown". Here's an example:

<nav class="nav">
  <div class="nav-tabs">
    <div class="nav-item">
      <a class="nav-link" href="#tab1">Tab 1</a>
    </div>
    <div class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Tab 2</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Option 1</a>
        <a class="dropdown-item" href="#">Option 2</a>
        <a class="dropdown-item" href="#">Option 3</a>
      </div>
    </div>
    <div class="nav-item">
      <a class="nav-link" href="#tab3">Tab 3</a>
    </div>
  </div>
</nav>

In addition to these basic features, Bootstrap also provides several JavaScript plugins that allow you to further customize the behavior of the tabs and pills component. For example, you can use the "tab" plugin to enable dynamic tabbing, and you can use the "collapse" plugin to enable accordion-style content toggling.

In conclusion, Bootstrap's tabs and pills component is a powerful tool that can be used to create navigation tabs that are both functional and visually pleasing. With its simple structure, customizable appearance, and a variety of JavaScript plugins, Bootstrap makes it easy for developers to create navigation tabs that are tailored to their specific needs.