Skip to content

Instantly share code, notes, and snippets.

@maxivak
Created October 10, 2017 11:04
Show Gist options
  • Save maxivak/86535e8e6d3504d62bf7d637bf46109c to your computer and use it in GitHub Desktop.
Save maxivak/86535e8e6d3504d62bf7d637bf46109c to your computer and use it in GitHub Desktop.
Bootstrap 4 tabs (pills) underlined

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment