Tab

Tabs organize content across different screens, data sets, and other interactions.

Interactive demo

Horizontal tabs - Left aligned

By default tabs are aligned to left. If it needs to be centered or right aligned, change "<ul class="nav nav-tabs left to ul class="nav nav-tabs center or ul class="nav nav-tabs right

<div class="horizontal-tab accordion-tab">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item"> <a class="nav-link active" href="#ht-1" role="tab" data-bs-toggle="tab" aria-selected="true">Horizontal Tab 1</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#ht-2" role="tab" data-bs-toggle="tab" aria-selected="false">Horizontal Tab 2</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#ht-3" role="tab" data-bs-toggle="tab" aria-selected="false">Horizontal Tab 3</a> </li>
        </ul>
        <div id="tab-content-1" class="accordion tab-content">
          <div id="ht-1" class="accordion-item tab-pane fade show active">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#h-tab-1" aria-expanded="true">Horizontal Tab 1</button>
              </h2>
            </div>
            <div id="h-tab-1" class="collapse show" data-parent="#tab-content-1">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="ht-2" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#h-tab-2" aria-expanded="true">Horizontal Tab 2</button>
              </h2>
            </div>
            <div id="h-tab-2" class="collapse" data-parent="#tab-content-1">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="ht-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#h-tab-3" aria-expanded="true">Horizontal Tab 3</button>
              </h2>
            </div>
            <div id="h-tab-3" class="collapse" data-parent="#tab-content-1">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

Horizontal boxed tabs with icon

<div class="horizontal-boxed-tab accordion-tab has-icon">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item"> <a class="nav-link active" href="#hbt-1" role="tab" data-bs-toggle="tab" aria-selected="true"><span><i class="fal fa-briefcase"></i></span>Horizontal Boxed Tab 1</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#hbt-2" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Horizontal Boxed Tab 2</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#hbt-3" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Horizontal Boxed Tab 3</a> </li>
        </ul>
        <div id="tab-content-2" class="accordion tab-content">
          <div id="hbt-1" class="accordion-item tab-pane fade show active" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#hb-tab-1" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Horizontal Boxed Tab 1</button>
              </h2>
            </div>
            <div id="hb-tab-1" class="collapse show" data-parent="#tab-content-2">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="hbt-2" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link  collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#hb-tab-2" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Horizontal Boxed Tab 2</button>
              </h2>
            </div>
            <div id="hb-tab-2" class="collapse" data-parent="#tab-content-2">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="hbt-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#hb-tab-3" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Horizontal Boxed Tab 3</button>
              </h2>
            </div>
            <div id="hb-tab-3" class="collapse" data-parent="#tab-content-2">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

Vertical tabs with icon - Default

<div class="vertical-tab accordion-tab d-flex">
        <div class="nav-left">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"> <a class="nav-link active" href="#vt-1" role="tab" data-bs-toggle="tab" aria-selected="true">Vertical Tab 1</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vt-2" role="tab" data-bs-toggle="tab" aria-selected="false">Vertical Tab 2</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vt-3" role="tab" data-bs-toggle="tab" aria-selected="false">Vertical Tab 3</a> </li>
          </ul>
        </div>
        <!-- Tab panes -->
        <div id="tab-content-3" class="accordion tab-content">
          <div id="vt-1" class="accordion-item tab-pane fade show active" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#v-tab-1" aria-expanded="true">Vertical Tab 1</button>
              </h2>
            </div>
            <div id="v-tab-1" class="collapse show" data-parent="#tab-content-3">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vt-2" class="accordion-item tab-pane fade" role="tabpanel" aria-labelledby="hbt-2">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#v-tab-2" aria-expanded="true">Vertical Tab 2</button>
              </h2>
            </div>
            <div id="v-tab-2" class="collapse" data-parent="#tab-content-3">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vt-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#v-tab-3" aria-expanded="true">Vertical Tab 3</button>
              </h2>
            </div>
            <div id="v-tab-3" class="collapse" data-parent="#tab-content-3">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

Vertical tabs with icon - Boxed

<div class="vertical-boxed-tab accordion-tab has-icon d-flex">
        <div class="nav-left">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"> <a class="nav-link active" href="#vbt-1" role="tab" data-bs-toggle="tab" aria-selected="true"><span><i class="fal fa-briefcase"></i></span>Vertical Boxed Tab 1</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vbt-2" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Vertical Boxed Tab 2</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#vbt-3" role="tab" data-bs-toggle="tab" aria-selected="false"><span><i class="fal fa-briefcase"></i></span>Vertical Boxed Tab 3</a> </li>
          </ul>
        </div>
        <!-- Tab panes -->
        <div id="tab-content-4" class="accordion tab-content">
          <div id="vbt-1" class="accordion-item tab-pane fade show active" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#vb-tab-1" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Vertical Boxed Tab 1</button>
              </h2>
            </div>
            <div id="vb-tab-1" class="collapse show" data-parent="#tab-content-4">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 1 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vbt-2" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#vb-tab-2" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Vertical Boxed Tab 2</button>
              </h2>
            </div>
            <div id="vb-tab-2" class="collapse collapsed" data-parent="#tab-content-4">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 2 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
          <div id="vbt-3" class="accordion-item tab-pane fade" role="tabpanel">
            <div class="accordion-header" role="tab">
              <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#vb-tab-3" aria-expanded="true"><span><i class="fal fa-briefcase"></i></span> Vertical Boxed Tab 3</button>
              </h2>
            </div>
            <div id="vb-tab-3" class="collapse" data-parent="#tab-content-4">
              <div class="accordion-body">
                <h3 class="tab-title">Tab 3 Content</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                  it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                  sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

Tabs will be displayed as collapsible accordions in mobile view

When to use

Tabs should be used for:

• Exposing related but separate content.

• For example, subpages or different content under the same category.

Tabs should not be used for:

• Containing excessive information; You should consider reducing the content. Alternatively, you can consider splitting your content into different sections using properly formatted text.

• Making comparisons or presenting tabular data; Using the table component may be more appropriate.