Building 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 so nicely provide for us give us all of the funtionality that we need. Just give them a nice click-around.

The Boostrap Way

Bookings info...

Requests...

Conversations...

The Problem

They look terrible.

Le Wagon Style

Thankfully the kind developers at Le Wagon have provided us with some nice tabs with style. (But they don't go anywhere.)

Boostrap + Style

Combine the JavaScript functionality behind the Bootstrap ones with the Le Wagon style tabs with only minor tweaks.

Bookings
Requests
Conversations

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..

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..

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.

The SCSS

.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;
  }
}

The 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>