Bootstrap 5Navigation

Bootstrap 5 Tabs

Bootstrap 5 tabs provide a way to present related content in separate panels that users switch between by clicking tab labels. Bootstrap offers two visual styles: nav-tabs (underlined) and nav-pills (button-style). Tab content panels are shown/hidden using Bootstrap's Tab JavaScript plugin.

Primary Class

.nav-tabs / .nav-pills

Common Use Cases

→Feature showcase with tabbed details
→Code/preview toggle
→Product specification tabs
→Dashboard navigation
→Pricing plan feature comparison
→Before/after content presentation

Variants & Classes

Variant	Description	Classes
Nav tabs	Classic underline-style tabs.	`nav nav-tabs + nav-item + nav-link + tab-content + tab-pane`
Nav pills	Pill/button style tab navigation.	`nav nav-pills + nav-item + nav-link`
Justified tabs	Tabs stretch to fill the full width.	`nav nav-tabs nav-justified`
Vertical tabs	Tabs stack vertically on the left side.	`nav flex-column nav-pills + tab-content side-by-side in a row`

Code Example

<ul class="nav nav-tabs mb-4" id="featureTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active fw-semibold" data-bs-toggle="tab"
      data-bs-target="#tab-generate" type="button">Generate</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link fw-semibold" data-bs-toggle="tab"
      data-bs-target="#tab-edit" type="button">Edit Mode</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="tab-generate" role="tabpanel">
    <p class="text-muted">Describe any page and get production-ready HTML in minutes.</p>
  </div>
  <div class="tab-pane fade" id="tab-edit" role="tabpanel">
    <p class="text-muted">Modify any Canvas template with natural language instructions.</p>
  </div>
</div>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Feature tabs with icon and description panel
✓Code/preview side-by-side tab
✓Vertical tabs with full-width content panel
✓Pills-style pricing period toggle
✓Tabbed portfolio filter

Best Practices

Add role attributes for accessibility

Tab components require role='tablist' on the nav, role='tab' on each button, and role='tabpanel' on each tab-pane. Bootstrap's default examples include these — don't remove them.

Use nav-pills for design-forward interfaces

Nav tabs look traditional and interface-like. Nav pills are more design-flexible and suit modern SaaS and marketing page tab sections better. Pair with background colours for visual weight.

FAQ

How do I activate a Bootstrap 5 tab with JavaScript?

Use Bootstrap's Tab API: const tab = new bootstrap.Tab(document.querySelector('[data-bs-target="#myTab"]')); tab.show(); Or use the show() method on the tab's trigger element.

Can Bootstrap 5 tabs be used as URL hash navigation?

Yes — by reading window.location.hash on page load and activating the corresponding tab with JavaScript. Canvas Builder can generate this pattern on request.