← all Bootstrap classes list

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

Code copied to the clipboard.

Copying failed

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

More in Bootstrap Navs

Create Bootstrap 4 templates in minutes.

Try Demo Learn more

FREE Create a Bootstrap Shuffle account and get access to Tailwind Builder and Bulma Builder for FREE (save $178).