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

Use Shuffle AI to build your own Bootstrap templates

Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.

Check .nav-pills in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

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