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.

Bootstrap 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 and classes

Variant	Description and classes	Classes
Nav tabs	Classic underline-style tabs.`nav nav-tabs + nav-item + nav-link + tab-content + tab-pane`	`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`	`nav nav-pills + nav-item + nav-link`
Justified tabs	Tabs stretch to fill the full width.`nav nav-tabs nav-justified`	`nav nav-tabs nav-justified`
Vertical tabs	Tabs stack vertically on the left side.`d-flex align-items-start + nav flex-column nav-pills + tab-content`	`d-flex align-items-start + nav flex-column nav-pills + tab-content`

Code example

HTML

<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>

Live examples

Content Tabs

Nav tabs wired to tab panes: click a tab to switch the panel below.

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:

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.