Tabs
Bootstrap 5.3 .nav-tabs, .nav-pills, .nav-underline, card header tabs, vertical stacks, segmented controls, and more. Everything lives in .tabs-page-bs5 so data-bs-theme and CSS variables stay correct — toggle light/dark in the navbar.
Accessibility
Use role="tablist" / role="tab" / role="tabpanel", pair aria-controls with panel id, and keep aria-selected in sync. Prefer <button type="button"> for in-page tabs. Icon-only tabs need aria-label.
Baseline
Classic .nav-tabs + bordered panel
Connected panel uses theme border and body background so the active tab reads as “open” in light and dark.
High-level summary of the product or workspace. Use for hero facts, status, and primary actions.
Specifications, long-form copy, or nested components belong here.
Policies, delivery windows, and carrier notes.
Underline
.nav-underline
Minimal chrome; strong focus on typography.
Unsaved drafts and private notes.
Live content visible to visitors.
Queued releases with go-live time.
Pills
Soft row · .nav-pills
Primary mail stream.
Pinned conversations.
Deferred until later.
Segmented
Pill track control
iOS-style segmented switch using a muted rail.
Hourly breakdown for today.
Seven-day trend.
Calendar month rollup.
Outline pills
Subtle fills · .nav-pills + utilities
REST reference and keys.
Event payloads and retries.
Language-specific guides.
Card integration
.card-header-tabs
Card body stays flush; tabs sit in the header rail.
- 10:02 — Deployment succeeded
- 09:18 — Config updated
- Yesterday — New member invited
Owners, editors, and guests for this resource.
Alignment
.nav-fill tabs
Equal-width tab targets.
Second column content.
Third column content.
Alignment
.justify-content-end
Raw event log.
Rendered preview (default tab on the right).
Overflow
Horizontal scroll · many tabs
Narrow viewports keep all targets reachable without wrapping.
Scroll the tab row horizontally on small screens.
Analytics pane.
Audience pane.
Acquisition pane.
Behavior pane.
Conversions pane.
Attribution pane.
Icons
Label + icon
Dashboard widgets and shortcuts.
Account and preferences.
Workspace configuration.
Toolbar
Icon-only pills
Each control has an aria-label.
Dense card grid.
Sortable rows.
Geo visualization.
Metrics
Tabs with badges
Tickets awaiting response.
Resolved this sprint.
Scale
.nav-sm / .nav-lg
Compact row
Smaller hit targets and caption-sized labels.
Alternate compact pane.
Spacious row
Larger tabs for pointer and touch UIs.
Alternate spacious pane.
Vertical
Pills column + panel
Workspace name
Locale, timezone, and display preferences.
Sessions & devices
SSO, 2FA, and recovery codes.
Channels
Email, push, and in-app digests.
Plans & invoices
Payment method and tax profile.
Dropdown
Extra targets in a menu
Primary tab.
Profile tab.
Opened from dropdown: Messages.
Opened from dropdown: Settings.
Theme island
data-bs-theme="dark" inside light page
Embedded dark island for code or terminals.
Structured log lines.
Justified pills
.nav-pills + .nav-fill
Components, tokens, and layout grids.
Clickable flows and motion studies.
Specs for engineering and QA.