Pills in Bootstrap

Pills in Bootstrap are a variation of the navs and navbars components, used to create a set of tabs or navigation links that have a "pill" shape with rounded edges. They provide a stylish way to navigate through different sections or pages.

1. Basic Pills

The basic pill navigation consists of a list of items with rounded corners, styled to look like pills. This is useful for creating tabs or navigation elements that are visually distinct.

Example:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

• <ul class="nav nav-pills">: Creates a list with pill-style navigation.
• nav-link: Styles the navigation links.
• active: Indicates the currently active item.

2. Active and Disabled Pills

You can set one of the pills to be active or disabled to show the current selection or indicate an unavailable option.

Example:

<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

• active: Styles the active pill.
• disabled: Styles the pill as disabled and prevents interaction.

3. Customizing Pills

You can customize the appearance of pills using Bootstrap utility classes or custom styles.

a. Custom Colors

Example:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link bg-primary text-white" href="#">Primary</a>
  </li>
  <li class="nav-item">
    <a class="nav-link bg-secondary text-white" href="#">Secondary</a>
  </li>
  <li class="nav-item">
    <a class="nav-link bg-success text-white" href="#">Success</a>
  </li>
</ul>

• bg-primary, bg-secondary, bg-success: Applies different background colors.
• text-white: Ensures text is visible on colored backgrounds.

b. Custom Sizes

To adjust the size of pills, you can use utility classes or custom CSS.

Example:

CSS:

.nav-pills .nav-link {
  font-size: 1.25rem; /* Larger text */
  padding: 10px 20px; /* Larger padding */
}

HTML:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" href="#">Large Pill</a>
  </li>
  <!-- Other items -->
</ul>

4. Vertical Pills

Pills can be arranged vertically using the flex-column class. This is useful for side navigation menus.

Example:

<div class="d-flex flex-column">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="#">Item 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Item 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Item 3</a>
    </li>
  </ul>
</div>

• flex-column: Arranges the pills in a vertical column.

5. Pills with Content

Pills can be used in combination with content to create tabbed interfaces. This involves using JavaScript to toggle between different sections.

Example:

HTML:

<ul class="nav nav-pills" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-messages-tab" data-bs-toggle="pill" href="#pills-messages" role="tab" aria-controls="pills-messages" aria-selected="false">Messages</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    Home content
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    Profile content
  </div>
  <div class="tab-pane fade" id="pills-messages" role="tabpanel" aria-labelledby="pills-messages-tab">
    Messages content
  </div>
</div>

• data-bs-toggle="pill": Used to activate the pill tab.
• tab-content and tab-pane: Container and content for the pills.

Summary of Pills in Bootstrap

• Basic Pills: Use <ul class="nav nav-pills"> to create pill-style navigation.
• Active and Disabled: Manage the state of pills with active and disabled classes.
• Customization: Change colors, sizes, and styles using utility classes or custom CSS.
• Vertical Pills: Arrange pills in a vertical layout with flex-column.
• Content Tabs: Combine pills with content areas for tabbed interfaces, using Bootstrap’s JavaScript components.