Tabs

Basic

<ul class="nav nav-tabs nav-tabs-basic">
  <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab3-1">Tab 1</a> </li>
  <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab3-2">Tab 2</a> </li>
  <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab3-3">Tab 3</a> </li>
</ul>
<!-- /.nav-tabs -->
<div class="tab-content mt-0 mt-md-5">
  <div class="tab-pane fade show active" id="tab3-1">
    ...
  </div>
  <!--/.tab-pane -->
  <div class="tab-pane fade" id="tab3-2">
    ...
  </div>
  <!--/.tab-pane -->
  <div class="tab-pane fade" id="tab3-3">
    ...
  </div>
  <!--/.tab-pane -->
</div>
<!-- /.tab-content -->

Pills

<ul class="nav nav-tabs nav-pills">
  <li class="nav-item"> 
    <a class="nav-link active" data-bs-toggle="tab" href="#tab1-1">
      <i class="uil uil-phone-volume pe-1"></i>
      <span>Tab 1</span>
    </a>
  </li>
  <li class="nav-item"> 
    <a class="nav-link" data-bs-toggle="tab" href="#tab1-2">
      <i class="uil uil-shield-exclamation pe-1"></i>
      <span>Tab 2</span>
    </a> 
  </li>
  <li class="nav-item"> 
    <a class="nav-link" data-bs-toggle="tab" href="#tab1-3">
      <i class="uil uil-laptop-cloud pe-1"></i>
      <span>Tab 3</span>
    </a> 
  </li>
</ul>
<!-- /.nav-tabs -->

<div class="tab-content">
  <div class="tab-pane fade show active" id="tab1-1">
    ...
  </div>
  <!--/.tab-pane -->
  <div class="tab-pane fade" id="tab1-2">
    ...
  </div>
  <!--/.tab-pane -->
  <div class="tab-pane fade" id="tab1-3">
    ...
  </div>
  <!--/.tab-pane -->
</div>
<!-- /.tab-content -->

Justified

Check out a live example: Demo 9.

<ul class="nav nav-tabs nav-tabs-bg nav-tabs-shadow-lg d-flex justify-content-between nav-justified flex-lg-row flex-column">
  <li class="nav-item"> 
    <a class="nav-link d-flex flex-row active" data-bs-toggle="tab" href="#tab2-1">
      <div><img src="./assets/img/icons/lineal/rocket.svg" class="svg-inject icon-svg icon-svg-md text-yellow me-4" alt="" /></div>
      <div>
        <h4 class="mb-1">Tab 1</h4>
        <p>Description</p>
      </div>
    </a> 
  </li>
  <li class="nav-item"> 
    <a class="nav-link d-flex flex-row" data-bs-toggle="tab" href="#tab2-2">
      <div><img src="./assets/img/icons/lineal/savings.svg" class="svg-inject icon-svg icon-svg-md text-green me-4" alt="" /></div>
      <div>
        <h4 class="mb-1">Tab 2</h4>
        <p>Description</p>
      </div>
    </a> 
  </li>
</ul>
<!-- /.nav-tabs -->
<div class="tab-content">
  <div class="tab-pane fade show active" id="tab2-1">
    ...
  </div>
  <!--/.tab-pane -->
  <div class="tab-pane fade" id="tab2-2">
    ...
  </div>
  <!--/.tab-pane -->
</div>
<!-- /.tab-content -->