Bootstrap 4 tabs (pills) underlined

tabs-underline-bootstrap4.md

Bootstrap 4 tabs (or pills) rendered underline.

• SASS:

_pills_underline_varibles.scss - edit styles using variables

$nav-pills-underline-link-active-color: $link-color !default;
$nav-pills-underline-link-hover-color: $link-hover-color !default;

$nav-pills-underline-bg:    transparent !default;
$nav-pills-underline-active-bg:    transparent !default;

$nav-pills-underline-hover-bg:    $gray-200 !default;

$nav-pills-underline-border-width:    3px !default;
$nav-pills-underline-border-color:    map-get($theme-colors, "secondary");

• _pills_underline.scss - add a new class .pills-underline

.nav-pills-underline{
  .nav-link {
    @include border-radius(0);

    &.active,
    .show > & {
      color: $nav-pills-underline-link-active-color;
      //background-color: $nav-pills-underline-active-bg;

    }
  }

  > li.nav-item {
    > a.nav-link{

      background-color: $nav-pills-underline-bg !important;

      border-bottom-width: $nav-pills-underline-border-width;
      border-bottom-style: solid;
      border-bottom-color: transparent;
    }

    > a.nav-link.active,
    > a.nav-link.active:hover,
    > a.nav-link:hover
    {
      text-decoration: none;

      border-bottom-width: $nav-pills-underline-border-width;
      border-bottom-style: solid;
      border-bottom-color: $nav-pills-underline-border-color;
    }

    // bg
    > a.nav-link.active{
      background-color: $nav-pills-underline-active-bg !important;
    }



    // color
    > a.nav-link.active:hover,
    > a.nav-link:hover
    {
      color: $nav-pills-underline-link-hover-color;
      background-color: $nav-pills-underline-hover-bg !important;

    }

  }



}

• include SASS into your main sass file.

• HTML

<ul class="nav nav-pills nav-pills-underline">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>