Tabs & Pills

Use the Bootstrap tab javascript plugin to extend navigational tabs and pills to create tab panes of local content.
Read the official Bootstrap Documentation for a full list of instructions and other options.

Styles

Change the style of .navs component with modifiers and utilities. Mix and match as needed, or build your own.

Tabs

Use class .nav-tabs to create basic nave tabs.

Pills

Use class .nav-pills to create nave pills.

Alignments

Change the alignment of your nav with the following classes.

Top

Use class .nav-align-top to align navs top.

Bottom

Use class .nav-align-bottom to align navs bottom.

Left

Use class .nav-align-left to align navs left.

Right

Use class .nav-align-right to align navs right.

Within Cards

Use tabs & pills navs within card.

Tabs within Card

<div class="card-header">
                  <div class="nav-align-top">
                    <ul class="nav nav-tabs" role="tablist">
                      <li class="nav-item">
                        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-within-card-active" aria-controls="navs-within-card-active" aria-selected="true">Active</button>
                      </li>
                      <li class="nav-item">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-within-card-link" aria-controls="navs-within-card-link" aria-selected="false">Link</button>
                      </li>
                      <li class="nav-item">
                        <button type="button" class="nav-link disabled" data-bs-toggle="tab" role="tab" aria-selected="false">Disabled</button>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="card-body">
                  <div class="tab-content p-0">
                    <div class="tab-pane fade show active" id="navs-within-card-active" role="tabpanel">
                      <h4 class="card-title">Special active title</h4>
                      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                      <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="tab-pane fade" id="navs-within-card-link" role="tabpanel">
                      <h4 class="card-title">Special link title</h4>
                      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                      <a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
                    </div>
                  </div>
                </div>
                </div>

Pills within Card

<div class="card text-center">
                  <div class="card-header">
                    <ul class="nav nav-pills card-header-pills" role="tablist">
                      <li class="nav-item">
                        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-active" aria-controls="navs-pills-within-card-active" aria-selected="true">Active</button>
                      </li>
                      <li class="nav-item">
                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-link" aria-controls="navs-pills-within-card-link" aria-selected="false">Link</button>
                      </li>
                      <li class="nav-item">
                        <button type="button" class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false">Disabled</button>
                      </li>
                    </ul>
                  </div>
                  <div class="card-body">
                    <div class="tab-content p-0">
                      <div class="tab-pane fade show active" id="navs-pills-within-card-active" role="tabpanel">
                        <h4 class="card-title">Special active title</h4>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                      </div>
                      <div class="tab-pane fade" id="navs-pills-within-card-link" role="tabpanel">
                        <h4 class="card-title">Special link title</h4>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                </div>

With Icons

Use tabs & pills with inline & stacked icons.

Tabs with icons

<div class="card">
                  <div class="card-header">
                    <div class="nav-align-top">
                      <ul class="nav nav-tabs nav-fill" role="tablist">
                        <li class="nav-item">
                          <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-home" aria-controls="navs-justified-home" aria-selected="true"><i class="tf-icons ri-home-smile-line ri-20px me-2"></i> Home <span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-2">3</span></button>
                        </li>
                        <li class="nav-item">
                          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-profile" aria-controls="navs-justified-profile" aria-selected="false"><i class="tf-icons ri-user-3-line ri-20px me-2"></i> Profile</button>
                        </li>
                        <li class="nav-item">
                          <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-messages" aria-controls="navs-justified-messages" aria-selected="false"><i class="tf-icons ri-message-2-line ri-20px me-2"></i> Messages</button>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="tab-content p-0">
                      <div class="tab-pane fade show active" id="navs-justified-home" role="tabpanel">
                        <p>
                          Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear
                          claw
                          candy topping.
                        </p>
                        <p class="mb-0">
                          Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o
                          jelly-o ice
                          cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.
                        </p>
                      </div>
                      <div class="tab-pane fade" id="navs-justified-profile" role="tabpanel">
                        <p>
                          Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies
                          halvah
                          tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.
                        </p>
                        <p class="mb-0">
                          Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy
                          liquorice caramels.
                        </p>
                      </div>
                      <div class="tab-pane fade" id="navs-justified-messages" role="tabpanel">
                        <p>
                          Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi
                          bears
                          cake chocolate.
                        </p>
                        <p class="mb-0">
                          Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing
                          sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie
                          jelly.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

Pills with Stacked Icons

<div class="card text-center">
                  <div class="card-header">
                  <div class="nav-align-top">
                    <ul class="nav nav-pills" role="tablist">
                      <li class="nav-item">
                        <button type="button" class="nav-link d-flex flex-column gap-1 active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-with-icons-card-active" aria-controls="navs-pills-with-icons-card-active" aria-selected="true"><i class="tf-icons ri-home-smile-line ri-20px"></i> Active</button>
                      </li>
                      <li class="nav-item">
                        <button type="button" class="nav-link d-flex flex-column gap-1" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-with-icons-card-link" aria-controls="navs-pills-with-icons-card-link" aria-selected="false"><i class="tf-icons ri-links-line ri-20px"></i> Link</button>
                      </li>
                      <li class="nav-item">
                        <button type="button" class="nav-link d-flex flex-column gap-1 disabled" role="tab" data-bs-toggle="tab" aria-selected="false"><i class="tf-icons ri-prohibited-line ri-20px"></i> Disabled</button>
                      </li>
                    </ul>
                  </div>
                  </div>
                  <div class="card-body">
                    <div class="tab-content p-0">
                      <div class="tab-pane fade show active" id="navs-pills-with-icons-card-active" role="tabpanel">
                        <h4 class="card-title">Special active title</h4>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                      </div>
                      <div class="tab-pane fade" id="navs-pills-with-icons-card-link" role="tabpanel">
                        <h4 class="card-title">Special link title</h4>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                </div>