Building Tabs with Style

How to combine Bootstrap 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

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat commodi iure adipisci? Non a ratione similique laudantium beatae harum ex corporis aut sequi officiis vero labore quia illo, deleniti fuga? sit amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perspiciatis, placeat quibusdam minima quam, labore dolorem nam sequi tempore fugiat voluptas cum quod molestias nemo quae itaque est voluptatibus perferendis?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem quas ipsa nihil iure dicta perferendis ullam dolorem, distinctio eveniet ad voluptatem magnam illo quam quod dignissimos, repudiandae cum eos similique.

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.

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">
    <a class="active tab-underlined" id="home-tab" data-toggle="tab" href="#bookings" role="tab" aria-controls="home" aria-selected="true">Bookings</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="tab-underlined" id="profile-tab" data-toggle="tab" href="#requests" role="tab" aria-controls="profile" aria-selected="false">Requests</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="tab-underlined" id="converstion-tab" data-toggle="tab" href="#converstions" role="tab" aria-controls="converstion" aria-selected="false">Conversations</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade py-3 show active" id="bookings" role="tabpanel" aria-labelledby="home-tab">
    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" role="tabpanel" aria-labelledby="profile-tab">
    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="converstions" role="tabpanel" aria-labelledby="converstion-tab">
    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>