Building Functional Tabs with Style

How to combine Bootstrap 5.2 function with style

There's no reason to reinvent the wheel here. The tabs that Bootstrap provide for us give us all of the functionality that we need. You can give them a nice click-around here or just take a look at the screenshot below 👇

The problem is that they don't look very nice. Thankfully the kind developers at Le Wagon have provided us with some tab style in their UI Kit. But, they are not functional just yet.

So with the combination of Bootstrap functionality and Le Wagon style, we've come up with this:

You can have a look at the code and click around on this Codepen

SCSS

Remember to import both CSS and JS from Bootstrap as well.

.tabs-underlined {
  display: flex;
  align-items: center;
}
.tabs-underlined {
  .tab-underlined {
    color: black;
    padding: 8px;
    margin: 8px 16px;
    opacity: .4;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    display: block;
  }
  .tab-underlined:hover {
    opacity: 0.5;
  }
  .tab-underlined.active {
    opacity: 1;
    border-bottom: 3px solid #555555;
  }
}

HTML

<ul class="nav tabs-underlined" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <span class="nav-link tab-underlined active" id="bookings-tab" data-bs-toggle="tab" data-bs-target="#bookings-tab-pane" role="tab" aria-controls="bookings-tab-pane" aria-selected="true">Bookings</span>
  </li>
  <li class="nav-item" role="presentation">
    <span class="nav-link tab-underlined" id="requests-tab" data-bs-toggle="tab" data-bs-target="#requests-tab-pane" role="tab" aria-controls="requests-tab-pane" aria-selected="false">Requests</span>
  </li>
  <li class="nav-item" role="presentation">
    <span class="nav-link tab-underlined" id="conversations-tab" data-bs-toggle="tab" data-bs-target="#conversations-tab-pane" role="tab" aria-controls="conversations-tab-pane" aria-selected="false">Conversations</span>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade py-3 show active" id="bookings-tab-pane" role="tabpanel" aria-labelledby="bookings-tab" tabindex="0">
    This is the content for the Bookings tab. Notice in the tab HTML there is a href="#bookings". This is pointing to the id of this div..
  </div>
  <div class="tab-pane fade py-3" id="requests-tab-pane" role="tabpanel" aria-labelledby="requests-tab" tabindex="0">
    This is the content for the Requests tab. Notice in the tab HTML there is a href="#requests". This is pointing to the id of this div..
  </div>
  <div class="tab-pane fade py-3" id="conversations-tab-pane" role="tabpanel" aria-labelledby="conversations-tab" tabindex="0">
    This is the content for the Conversations tab. Notice in the tab HTML there is a href="#converstations". This is pointing to the id of this div.
  </div>
</div>