Pills

Bootstrap 5.3 .nav-pills patterns beyond the basics: segmented controls, soft tracks, tonal accents, icons, counts, vertical rails, dropdowns inside pills, and tab panels. Styling uses Bootstrap CSS variables so everything tracks data-bs-theme from the navbar toggle.

Native markup, layered presentation

Pair .nav with .nav-pills. For keyboard-accessible tab interfaces, add role="tablist" on the list, role="tab" on links, and wire panes with data-bs-toggle="tab". The showcase below adds Elementer modifier classes (for example pills-soft, pills-segmented) scoped under .pills-page-bs5.

Navs & tabs docs

Classic horizontal

Default pill spacing with .nav, .nav-pills, and alignment utilities.

Soft track

Muted rail behind pills; active chip lifts slightly.

Daily snapshots and intraday metrics.
Rolling seven-day trends and comparisons.
Month-to-date rollups and forecasts.

Segmented control

Single outer radius; inner items flush like iOS segments.

List view — dense rows, sortable columns.
Grid view — cards with cover imagery.
Map view — geo clusters and pins.

Outline & ghost

Border-led idle state; fill on active.

Ghost: minimal chrome until hover or active.

Dense & comfortable

Scale with modifier classes on the .nav.

Compact

Comfortable

Tonal accents

Semantic hues on the active pill; still theme-aware.

Primary

Success

Danger

Warning

Info

Dark surface

Icons & badges

Counts and glyphs; wrap icons in .me-1 for rhythm.

Icon-only toolbar

Square-ish hit targets with tooltips for labels.

Glass panel

Frosted strip over a gradient (subtle in dark mode).

Inverse on brand bar

High-contrast pills on saturated primary.

Fill, justify & alignment

.nav-fill stretches items; .nav-justified equalizes width at larger breakpoints.

nav-fill (segmented)

Centered cluster

Vertical rail + content

Sidebar pills with tab panes — common in settings layouts.

Account

Avatar, display name, locale, and session devices.

Security

Password, two-factor keys, and trusted browsers.

Billing

Plans, invoices, tax profiles, and payment methods.

Notifications

Email digests, push categories, and quiet hours.

Dropdown inside pills

Use .nav-item.dropdown for overflow actions.

Pills + underline hybrid

Active pill with a bottom accent bar.

Step strip

Progressive disclosure with connectors between steps.

  • 1 · Cart
  • 2 · Address
  • 3 · Pay
  • 4 · Done

Chip delete

Filter chips with dismiss buttons (decorative example).

  • Vue
  • TypeScript

Pill field (search scope)

Search input and scope chips share one rounded shell — no cramped input-group clipping.

Responsive wrap

Many items: .flex-wrap and horizontal scroll on narrow viewports.