Building Functional Tabs with Style
Tags: css, bootstrap, tutorial, javascript
Published: 2023-02-01 05:42:25

_How to combine [Bootstrap 5.2](https://getbootstrap.com/docs/5.2/getting-started/introduction) 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](https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior) or just take a look at the screenshot below 👇

![Bootstrap tabs screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyb18seywoqitv84p8f9.png)

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](https://uikit.lewagon.com/documentation#tabs). But, they are not functional just yet.

![Le Wagon tabs screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gushn5rebrxujb9bu3w3.png)

So with the combination of Bootstrap functionality and Le Wagon style, we've come up with this:
![Bootstrap tabs with Le Wagon style screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fov4l69532yec2tak7v6.png)

You can have a look at the code and click around on this [Codepen](https://codepen.io/dmbf29/pen/mdjzZQz)


### 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>
```