Overview
Anim
Layout
Forms
Components
Accordion
Alerts
Avatar
Badge
Breadcrumb
Buttons
Button group
Close button
Calendar
Card
Caret
Carousel
Classified
Dropdowns
List
Loader
Modal
Navbar
Nav | Pills
Nav | Tabs
Pagination
Placeholders
Progress
Rating
Scrollbar
Sidenav
Spinners
Tables
Timeline
Toasts
Tooltips
TreeView
Utilities

Pills

Pills are quasi-navigation components which can highly improve website clarity and increase user experience.

UsageNg Tabs

Basic example

Basic pills are divided into 2 main sections - Pills navs (containing Nav-items) and Pills content (containing Tab-panes).

Tab 1 content
Tab 2 content
Tab 3 content 
  <!-- Pills navs -->
  <ul class="Nav Nav-pills MB-3" id="tabBasic" role="tablist">
    <li class="Nav-item" role="presentation">
      <a class="Nav-link Active" id="tabBasic-tab-1" href="#tabBasic-pills-1" role="tab" aria-controls="tabBasic-pills-1"
         (click)="$event.preventDefault()" aria-selected="true">Tab 1</a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabBasic-tab-2" href="#tabBasic-pills-2" role="tab" aria-controls="tabBasic-pills-2"
         (click)="$event.preventDefault()" aria-selected="false">Tab 2</a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabBasic-tab-3" href="#tabBasic-pills-3" role="tab" aria-controls="tabBasic-pills-3"
         (click)="$event.preventDefault()" aria-selected="false">Tab 3</a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link Disabled" href="#">Disabled</a>
    </li>
  </ul>
  <!-- Pills navs -->
  <!-- Pills content -->
  <div class="Tab-content" id="tabBasic-content">
    <div class="Tab-pane Fade Active Show" id="tabBasic-pills-1" role="tabpanel" aria-labelledby="tabBasic-tab-1">
      Tab 1 content
    </div>
    <div class="Tab-pane Fade" id="tabBasic-pills-2" role="tabpanel" aria-labelledby="tabBasic-tab-2">
      Tab 2 content
    </div>
    <div class="Tab-pane Fade" id="tabBasic-pills-3" role="tabpanel" aria-labelledby="tabBasic-tab-3">
      Tab 3 content
    </div>
  </div>
  <!-- Pills content -->

Fill and justify

Force your .Nav's contents to extend the full available width one of two modifier classes.

Fill

To proportionately fill all available space with your .Nav-items, use .Nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

Tab 1 content
Tab 2 content
Tab 3 content 
  <!-- Pills navs -->
  <ul class="Nav Nav-pills Nav-fill MB-3" id="tabFill" role="tablist">
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabFill-tab-1" href="#tabFill-pills-1" role="tab" aria-controls="tabFill-pills-1"
         (click)="$event.preventDefault()" aria-selected="true">Tab 1</a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link Active" id="tabFill-tab-2" href="#tabFill-pills-2" role="tab" aria-controls="tabFill-pills-2"
         (click)="$event.preventDefault()" aria-selected="false">Very very very very long Tab 2</a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabFill-tab-3" href="#tabFill-pills-3" role="tab" aria-controls="tabFill-pills-3"
         (click)="$event.preventDefault()" aria-selected="false">Tab 3</a>
    </li>
  </ul>
  <!-- Pills navs -->
  <!-- Pills content -->
  <div class="Tab-content" id="tabFill-content">
    <div class="Tab-pane Fade" id="tabFill-pills-1" role="tabpanel" aria-labelledby="tabFill-tab-1">
      Tab 1 content
    </div>
    <div class="Tab-pane Fade Active Show" id="tabFill-pills-2" role="tabpanel" aria-labelledby="tabFill-tab-2">
      Tab 2 content
    </div>
    <div class="Tab-pane Fade" id="tabFill-pills-3" role="tabpanel" aria-labelledby="tabFill-tab-3">
      Tab 3 content
    </div>
  </div>
  <!-- Pills content -->
Justify

For equal-width elements, use .Nav-justified. All horizontal space will be occupied by nav links, but unlike the .Nav-fill above, every nav item will be the same width.

Tab 1 content
Tab 2 content
Tab 3 content 
  <!-- Pills navs -->
  <ul class="Nav Nav-pills Nav-justified MB-3" id="tabJustify" role="tablist">
    <li class="Nav-item" role="presentation">
      <a class="Nav-link Active" id="tabJustify-tab-1" href="#tabJustify-pills-1" role="tab"
         aria-controls="tabJustify-pills-1" (click)="$event.preventDefault()" aria-selected="true">Tab 1</a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabJustify-tab-2" href="#tabJustify-pills-2" role="tab"
         aria-controls="tabJustify-pills-2" (click)="$event.preventDefault()" aria-selected="false">Very very very very long Tab 2</a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabJustify-tab-3" href="#tabJustify-pills-3" role="tab"
         aria-controls="tabJustify-pills-3" (click)="$event.preventDefault()" aria-selected="false">Tab 3</a>
    </li>
  </ul>
  <!-- Pills navs -->
  <!-- Pills content -->
  <div class="Tab-content" id="tabJustify-content">
    <div class="Tab-pane Fade Active Show" id="tabJustify-pills-1" role="tabpanel" aria-labelledby="tabJustify-tab-1">
      Tab 1 content
    </div>
    <div class="Tab-pane Fade" id="tabJustify-pills-2" role="tabpanel" aria-labelledby="tabJustify-tab-2">
      Tab 2 content
    </div>
    <div class="Tab-pane Fade" id="tabJustify-pills-3" role="tabpanel" aria-labelledby="tabJustify-tab-3">
      Tab 3 content
    </div>
  </div>
  <!-- Pills content -->
Vertical

Stack your navigation by changing the flex item direction with the .Flex-column utility.

HomeProfileMessages
Home content
Profile content
Messages content 
  <div class="Row">
    <div class="Col-3">
      <!-- Tab navs -->
      <div class="Nav Flex-column Nav-pills Text-center" id="v-pills-tab" role="tablist"
           aria-orientation="vertical">
        <a class="Nav-link" id="v-pills-home-tab" href="#v-pills-home" role="tab"
           (click)="$event.preventDefault()"
           aria-controls="v-pills-home" aria-selected="false">Home</a>
        <a class="Nav-link Active" id="v-pills-profile-tab" href="#v-pills-profile" role="tab"
           (click)="$event.preventDefault()"
           aria-controls="v-pills-profile" aria-selected="true">Profile</a>
        <a class="Nav-link" id="v-pills-messages-tab" href="#v-pills-messages" role="tab"
           (click)="$event.preventDefault()"
           aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      </div>
      <!-- Tab navs -->
    </div>

    <div class="Col-9">
      <!-- Tab content -->
      <div class="Tab-content" id="v-pills-tabContent">
        <div class="Tab-pane Fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
          Home content
        </div>
        <div class="Tab-pane Fade Active Show" id="v-pills-profile" role="tabpanel"
             aria-labelledby="v-pills-profile-tab">
          Profile content
        </div>
        <div class="Tab-pane Fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
          Messages content
        </div>
      </div>
      <!-- Tab content -->
    </div>
  </div>
Pills with icons

Testing with FontAwesome Icons.

Tab 1 Home
Tab 2 Profile
Tab 3 Messages 
  <!-- Pills navs -->
  <ul class="Nav Nav-pills MB-3" id="tabWithIcons" role="tablist">
    <li class="Nav-item" role="presentation">
      <a class="Nav-link Active" id="tabWithIcons-tab-1" href="#tabWithIcons-pills-1" role="tab"
         aria-controls="tabWithIcons-pills-1" (click)="$event.preventDefault()" aria-selected="true">
        <i class="fa-solid fa-home ME-2"></i> Home
      </a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabWithIcons-tab-2" href="#tabWithIcons-pills-2" role="tab"
         aria-controls="tabWithIcons-pills-2" (click)="$event.preventDefault()" aria-selected="false">
        <i class="fa-solid fa-user ME-2"></i> Profile
      </a>
    </li>
    <li class="Nav-item" role="presentation">
      <a class="Nav-link" id="tabWithIcons-tab-3" href="#tabWithIcons-pills-3" role="tab"
         aria-controls="tabWithIcons-pills-3" (click)="$event.preventDefault()" aria-selected="false">
        <i class="fa-solid fa-message ME-2"></i> Messages
      </a>
    </li>
  </ul>
  <!-- Pills navs -->
  <!-- Pills content -->
  <div class="Tab-content" id="tabWithIcons-content">
    <div class="Tab-pane Fade Active Show" id="tabWithIcons-pills-1" role="tabpanel"
         aria-labelledby="tabWithIcons-tab-1">
      Tab 1 Home
    </div>
    <div class="Tab-pane Fade" id="tabWithIcons-pills-2" role="tabpanel" aria-labelledby="tabWithIcons-tab-2">
      Tab 2 Profile
    </div>
    <div class="Tab-pane Fade" id="tabWithIcons-pills-3" role="tabpanel" aria-labelledby="tabWithIcons-tab-3">
      Tab 3 Messages
    </div>
  </div>
  <!-- Pills content -->
Pills with buttons

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

Tab 1 content
Tab 2 content
Tab 3 content 
  <!-- Pills navs -->
  <ul class="Nav Nav-pills MB-3" id="pills-tab" role="tablist">
    <li class="Nav-item" role="presentation">
      <button class="Nav-link Active" id="pills-home-tab"
              type="button" role="tab" aria-controls="pills-home" aria-selected="true">
        Home
      </button>
    </li>
    <li class="Nav-item" role="presentation">
      <button class="Nav-link" id="pills-profile-tab"
              type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
        Profile
      </button>
    </li>
    <li class="Nav-item" role="presentation">
      <button class="Nav-link" id="pills-contact-tab"
              type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
        Contact
      </button>
    </li>
  </ul>
  <!-- Pills navs -->
  <!-- Pills content -->
  <div class="Tab-content" id="pills-tabContent">
    <div class="Tab-pane Fade Show Active" id="pills-home2" role="tabpanel" aria-labelledby="pills-home-tab">
      Tab 1 content
    </div>
    <div class="Tab-pane Fade" id="pills-profile2" role="tabpanel" aria-labelledby="pills-profile-tab">
      Tab 2 content
    </div>
    <div class="Tab-pane Fade" id="pills-contact2" role="tabpanel" aria-labelledby="pills-contact-tab">
      Tab 3 content
    </div>
  </div>
  <!-- Pills content -->