Overview

Tabs are a subset of .nav components. Simply add the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with Bootstrap’s tab JavaScript plugin.

Basic Tabs

<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="#">Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer tab name</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Tabs with Icons

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#"><i class="modus-icon material-icons">mood</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="modus-icon material-icons">face</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="modus-icon material-icons">sentiment_satisfied</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
    <i class="modus-icon material-icons">sentiment_very_dissatisfied</i></a>
  </li>
</ul>

Small Tabs

To use smaller variants of tabs, add the .nav-tabs-sm class.

<ul class="nav nav-tabs nav-tabs-sm">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer tab name</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<br>
<ul class="nav nav-tabs nav-tabs-sm">
  <li class="nav-item">
    <a class="nav-link active" href="#"><i class="modus-icon material-icons">mood</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="modus-icon material-icons">face</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="modus-icon material-icons">sentiment_satisfied</i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"><i class="modus-icon material-icons">sentiment_very_dissatisfied</i></a>
  </li>
</ul>

Tabs with Content

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

You can activate a tab navigation without writing JavaScript by simply specifying data-toggle="tab" on an element. Use this attribute on .nav-tabs.

Your content should be inside a .tab-content element as a sibling to .nav-tabs. The href attribute of each tab should match the id of its corresponding .tab-pane.

First Tab Content

Placeholder content for the tab panel. This one relates to the First tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay.

Second Tab Content

Placeholder content for the tab panel. This one relates to the Second tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.

Third Tab Content

Placeholder content for the tab panel. This one relates to the Third tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic.

Disabled Tab Content

This content is disabled and unviewable.

<ul class="nav nav-tabs" id="exampleTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="exampleFirstTab" data-toggle="tab" href="#exampleFirst" role="tab" aria-controls="exampleFirst" aria-selected="true">First tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="exampleSecondTab" data-toggle="tab" href="#exampleSecond" role="tab" aria-controls="exampleSecond" aria-selected="false">Second tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="exampleThirdTab" data-toggle="tab" href="#exampleThird" role="tab" aria-controls="exampleThird" aria-selected="false">Third tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="disabledTab" data-toggle="tab" href="#exampleDisabled" role="tab" aria-controls="exampleDisabled" aria-selected="false">Disabled tab</a>
  </li>
</ul>
<div class="tab-content py-3" id="exampleTabContent">
  <div class="tab-pane fade show active" id="exampleFirst" role="tabpanel" aria-labelledby="exampleFirstTab">
    <h5 id="first-tab-content">First Tab Content</h5>
    <p>
      Placeholder content for the tab panel. This one relates to the First tab. Takes you miles high, so high,
      'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my
      head. Oh, no. In another life I would make you stay.
    </p>
  </div>
  <div class="tab-pane fade" id="exampleSecond" role="tabpanel" aria-labelledby="exampleSecondTab">
    <h5 id="second-tab-content">Second Tab Content</h5>
    <p>
      Placeholder content for the tab panel. This one relates to the Second tab. You got the finest
      architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned
      that one day I'd be losing you. She eats your heart out.
    </p>
  </div>
  <div class="tab-pane fade" id="exampleThird" role="tabpanel" aria-labelledby="exampleThirdTab">
    <h5 id="third-tab-content">Third Tab Content</h5>
    <p>
      Placeholder content for the tab panel. This one relates to the Third tab. Her love is like a drug. All
      my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the
      artist. (This is how we do) So you wanna play with magic.
    </p>
  </div>
  <div class="tab-pane fade" id="exampleDisabled" role="tabpanel" aria-labelledby="disabledTab">
    <h5 id="disabled-tab-content">Disabled Tab Content</h5>
    <p>
      This content is disabled and unviewable.
    </p>
  </div>
</div>