is now part of Shuffle™. You can use the editor on this domain, but we encourage you to try Shuffle →. Shuffle™ includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →
← 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

Tips 💡

You don't need to remember all these classes. Just use a bootstrap builder 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

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 5 templates
in minutes 🚀

Featured by
Bootstrap Shuffle - Bootstrap builder for busy developers | Product Hunt Embed

"The most popular Bootstrap builder.
1,000+ supporters!"

"I wish I knew about it when
I started my last project."