Bootstrap 5Navigation

Bootstrap 5 Nav Pills

Bootstrap 5 Nav Pills are a navigation component that styles links as pill-shaped tab buttons, visually indicating the active section with a filled background. Unlike Nav Tabs, pills use a rounded capsule appearance and work well both horizontally and vertically. Use them when you want to switch between related content panels, filter a list, or provide secondary navigation within a page section.

Bootstrap class

.nav-pills

Common use cases

Switching between account settings sections (Profile, Security, Notifications, Billing) within a dashboard without a full page reload
Filtering a portfolio or product grid by category (All, Branding, Web Design, Print) using pill buttons tied to visible content blocks
Tabbed pricing plan comparisons (Monthly vs Annual) where the active pill indicates the currently displayed pricing tier
Vertical sidebar navigation inside a documentation or help centre layout, where each pill links to a different article section on the page

Variants and classes

Variant	Description and classes	Classes
Basic pills	Links styled as pills; the active one is filled.`nav nav-pills + nav-link active`	`nav nav-pills + nav-link active`
Fill and justify	Pills stretch to fill the row.`nav nav-pills nav-fill / nav-justified`	`nav nav-pills nav-fill / nav-justified`
Vertical pills	Stacked pills for sidebars and settings pages.`nav nav-pills flex-column`	`nav nav-pills flex-column`
Pills with panes	Pills that switch content panels like tabs.`nav-link + data-bs-toggle="pill" + tab-content + tab-pane`	`nav-link + data-bs-toggle="pill" + tab-content + tab-pane`

Code example

HTML

<ul class="nav nav-pills mb-4" id="settingsTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="profile-tab" data-bs-toggle="pill" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="true">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="security-tab" data-bs-toggle="pill" data-bs-target="#security" type="button" role="tab" aria-controls="security" aria-selected="false">Security</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="billing-tab" data-bs-toggle="pill" data-bs-target="#billing" type="button" role="tab" aria-controls="billing" aria-selected="false">Billing</button>
  </li>
</ul>

<div class="tab-content" id="settingsTabContent">
  <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <h5>Profile Settings</h5>
    <p>Update your display name, avatar, and public bio.</p>
  </div>
  <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
    <h5>Security Settings</h5>
    <p>Manage your password and two-factor authentication.</p>
  </div>
  <div class="tab-pane fade" id="billing" role="tabpanel" aria-labelledby="billing-tab">
    <h5>Billing &amp; Payments</h5>
    <p>View invoices and update your payment method.</p>
  </div>
</div>

Live examples

Basic Nav Pills

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

Canvas Builder generated nav pills with custom colours
Nav Pills with interactive states
Responsive nav pills for all screen sizes

Best practices

Use flex-column for vertical pill navigation

Add the class flex-column to your nav nav-pills element to stack pills vertically, ideal for sidebars. Pair it with col-3 or similar grid columns to sit alongside your tab content panel.

Fill available width with nav-fill or nav-justified

nav-fill makes each pill take proportional width based on its label length, while nav-justified forces all pills to equal width. Use nav-justified when you have 3 to 5 pills of similar label length for a cleaner, balanced look.

Override the active pill colour with a CSS variable

Bootstrap 5 pills use --bs-nav-pills-link-active-bg to control the active background colour. Set this variable in your root or a scoped selector to match your brand without overriding the full button stylesheet.

Pair with tab-pane fade for smooth transitions

Always add both fade and show active to the initially visible .tab-pane element. Without show, the active panel stays invisible on first render even though it is technically selected.

FAQ

What is the difference between Nav Pills and Nav Tabs in Bootstrap 5?

The visual difference is that Nav Tabs render an underline border style resembling browser tabs, while Nav Pills use a rounded filled-background capsule shape. Functionally they behave identically, both use data-bs-toggle and the .tab-content / .tab-pane pattern. Choose pills when your design calls for a button-like appearance, or when the navigation sits inside a card, sidebar, or toolbar rather than at the edge of a content area where the tab metaphor makes less visual sense.

How do I customise the active pill colour to match my brand?

The cleanest approach in Bootstrap 5 is to override the CSS custom property: .nav-pills { --bs-nav-pills-link-active-bg: #your-colour; }. If you also need to change the active text colour, add --bs-nav-pills-link-active-color: #fff; in the same block. Alternatively, you can override .nav-pills .nav-link.active directly in your stylesheet. Avoid editing Bootstrap source files directly unless you are compiling Sass, in which case set $nav-pills-link-active-bg and $nav-pills-link-active-color variables before importing Bootstrap.

How does Canvas Builder handle Nav Pills when generating a page?

When you describe a tabbed section or filtered content area in Canvas Builder, it generates fully wired Nav Pills markup (including the correct data-bs-toggle, aria attributes, and matching tab-pane IDs) ready to drop into your project. It applies your brand's primary colour to the active pill state automatically, and outputs a responsive structure so pills collapse or scroll gracefully on mobile without additional configuration.