Bootstrap docs

# Tabs

Horizontally or vertically stacked list of items. When clicked each item switch content in the tab pane.

#### Button-like style

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.
This is some placeholder content the Disabled tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.

    <!-- Nav tabs -->
    <ul class="nav nav-tabs mb-3" role="tablist" style="max-width: 450px">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
          Contact
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>
          Disabled
        </button>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab">...</div>
      <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab">...</div>
      <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab">...</div>
      <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab">...</div>
    </div>

#### Underline style

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.
This is some placeholder content the Disabled tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other `.nav-`powered navigation.

    <!-- Nav tabs (underline) -->
    <ul class="nav nav-underline mb-3" role="tablist">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" role="tab" aria-controls="home-tab-pane" aria-selected="true">
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
          Contact
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>
          Disabled
        </button>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab">...</div>
      <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab">...</div>
      <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab">...</div>
      <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab">...</div>
    </div>

#### Vertical alignment

    <!-- Vertical button-like tabs -->
    <ul class="nav nav-tabs flex-column" role="tablist" style="width: 150px">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
          Contact
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
          Disabled
        </button>
      </li>
    </ul>

    <!-- Vertical underline tabs -->
    <ul class="nav nav-underline flex-column" role="tablist">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
          Contact
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
          Disabled
        </button>
      </li>
    </ul>

#### With icons and dropdowns

    <!-- Button-like tabs -->
    <ul class="nav nav-tabs" role="tablist" style="max-width: 420px">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" href="#" data-bs-toggle="tab" role="tab" aria-selected="true">
          <i class="ci-home me-2 ms-n1"></i>
          Home
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          <i class="ci-user me-2 ms-n1"></i>
          Profile
        </a>
      </li>
      <li class="nav-item dropdown" role="presentation">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
              First tab link
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
              Second tab link
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
              Third tab link
            </a>
          </li>
        </ul>
      </li>
    </ul>

    <!--Underline tabs -->
    <ul class="nav nav-underline" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" href="#" data-bs-toggle="tab" role="tab" aria-selected="true">
          <i class="ci-home me-2"></i>
          Home
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
          <i class="ci-user me-2"></i>
          Profile
        </a>
      </li>
      <li class="nav-item dropdown" role="presentation">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
              First tab link
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
              Second tab link
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#" data-bs-toggle="tab" role="tab" aria-selected="false">
              Third tab link
            </a>
          </li>
        </ul>
      </li>
    </ul>

#### Shapes

    <!-- Rounded (default) tabs -->
    <ul class="nav nav-tabs mb-4" role="tablist" style="max-width: 450px">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link active" data-bs-toggle="tab" role="tab" aria-selected="true">
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false">
          Contact
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
          Disabled
        </button>
      </li>
    </ul>

    <!-- Pill shaped tabs -->
    <ul class="nav nav-tabs rounded-pill mb-4" role="tablist" style="max-width: 450px">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-pill active" data-bs-toggle="tab" role="tab" aria-selected="true">
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-pill" data-bs-toggle="tab" role="tab" aria-selected="false">
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-pill" data-bs-toggle="tab" role="tab" aria-selected="false">
          Contact
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-pill" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
          Disabled
        </button>
      </li>
    </ul>

    <!-- Square shaped tabs -->
    <ul class="nav nav-tabs rounded-0 mb-4" role="tablist" style="max-width: 450px">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-0 active" data-bs-toggle="tab" role="tab" aria-selected="true">
          Home
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-0" data-bs-toggle="tab" role="tab" aria-selected="false">
          Profile
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-0" data-bs-toggle="tab" role="tab" aria-selected="false">
          Contact
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link rounded-0" data-bs-toggle="tab" role="tab" aria-selected="false" disabled>
          Disabled
        </button>
      </li>
    </ul>

Top