PRO Tip: You don't have to remember all these classes. Just use our drag & drop editor. Try Demo

Bootstrap class: .nav-pills

<ul class="nav nav-pills">
  <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 disabled" href="#">Disabled</a>
  </li>
</ul>

Preview

Sass source

/* _nav.scss:74 */
.nav-pills {
  .nav-link {
    @include border-radius($nav-pills-border-radius);
  }

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

Uses variables

/* _nav.scss:74 */
$nav-pills-border-radius
$nav-pills-link-active-color
$nav-pills-link-active-bg

More in Bootstrap Navs

Bootstrap Shuffle drag & drop

Bootstrap drag & drop editor with 230+ components.

Try Demo » Get a LifeTime Deal $79