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.

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>
© 2017- Pixinvent, Hand-crafted & Made with ❤️