Bootstrap 5 tabs organize content into switchable panels. This page covers 4 tab patterns — basic, pill, vertical and icon tabs — each ready to use in dashboards, settings pages and content sections.
Quick Setup
Tabs require Bootstrap 5 JS bundle:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class | What It Does |
|---|---|
.nav-tabs | Horizontal underline tab style |
.nav-pills | Rounded pill tab style |
.nav-link | Each tab button |
.nav-link.active | Currently selected tab |
.nav-link.disabled | Non-clickable tab |
.tab-content | Wrapper for all tab panels |
.tab-pane | Each tab panel |
.tab-pane.fade | Enables fade animation |
.tab-pane.show.active | Currently visible panel |
data-bs-toggle="tab" | Marks as tab trigger |
data-bs-target="#id" | Links button to panel |
1. Basic Bootstrap 5 Tabs
Standard horizontal tabs with content panels using nav-tabs and tab-content.
2. Bootstrap 5 Pill Tabs
Rounded pill style tabs using nav-pills instead of nav-tabs. Great for dashboard sections.
3. Bootstrap 5 Vertical Tabs
Vertical side navigation tabs using flex-column on nav. Common in settings and admin pages.
4. Bootstrap 5 Tabs with Icons
Tabs with Bootstrap Icons for a more visual interface. Works great in dashboards.
Frequently Asked Questions
Use the Tab class: const tab = new bootstrap.Tab(document.querySelector('#myTab')); tab.show(). Or use the trigger method on the tab button element: document.querySelector('#myTabButton').click(). You can also listen for tab events with the shown.bs.tab event.
Save the active tab ID to localStorage on the shown.bs.tab event. On page load, read from localStorage and activate that tab. Example: tab.addEventListener('shown.bs.tab', e => localStorage.setItem('activeTab', e.target.id)). On load: const saved = localStorage.getItem('activeTab'); if(saved) new bootstrap.Tab(document.getElementById(saved)).show().
On page load check window.location.hash and activate the matching tab: const hash = window.location.hash; if(hash) new bootstrap.Tab(document.querySelector('[data-bs-target="' + hash + '"]')).show(). Update the hash on tab change using the shown.bs.tab event.
Bootstrap 5 tabs already include a fade animation by default when you add the fade class to tab-pane elements. To customize the animation override the CSS: .tab-pane.fade { transition: opacity 0.3s ease; }. For slide animations add custom CSS using transform.
On mobile, nav-tabs can overflow horizontally. Wrap the nav in a div with overflow-x: auto and white-space: nowrap. Or switch to a select dropdown on mobile using media queries. Pill tabs often work better on mobile as they can wrap to multiple lines naturally.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.