Bootstrap’s .nav-tabs class gives navigation a tabbed appearance; to switch content panels without leaving the page, you also need Bootstrap’s tab JavaScript plugin and connected tab and panel markup. The examples below use Bootstrap 5’s data-bs-* attributes. The cited official documentation is for Bootstrap 5.3, reviewed on October 8, 2026; “Tabs V10” is not established as a Bootstrap release or named product, so match the code to the version installed in your project.
What Bootstrap tabs do—and what they do not
Bootstrap separates a tab’s appearance from its behavior. Add .nav-tabs to a .nav element to style navigation as tabs. For controls that reveal different panels in place, include the tab plugin and connect each trigger to its panel. See the Bootstrap 5.3 navs and tabs documentation.
As an Amazon Associate I earn from qualifying purchases.
If the items navigate to separate pages or locations, use ordinary links and do not assign tab roles merely because the links look like tabs. For a local interface that changes which associated content is visible, use the dynamic tab pattern below. Appearance alone does not create switching behavior or accessible semantics.
Build a basic tab interface in Bootstrap 5
This example uses buttons because each control changes content on the current page. The trigger IDs, panel IDs, data-bs-target values, and aria-labelledby references must match. Keep every ID unique across the whole page.
#1 Best Overall
<ul class="nav nav-tabs" id="details-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active"
id="overview-tab"
data-bs-toggle="tab"
data-bs-target="#overview-panel"
type="button"
role="tab"
aria-controls="overview-panel"
aria-selected="true">
Overview
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link"
id="specifications-tab"
data-bs-toggle="tab"
data-bs-target="#specifications-panel"
type="button"
role="tab"
aria-controls="specifications-panel"
aria-selected="false">
Specifications
</button>
</li>
</ul>
<div class="tab-content" id="details-tabs-content">
<div class="tab-pane fade show active"
id="overview-panel"
role="tabpanel"
aria-labelledby="overview-tab"
tabindex="0">
<p>Overview content goes here.</p>
</div>
<div class="tab-pane fade"
id="specifications-panel"
role="tabpanel"
aria-labelledby="specifications-tab"
tabindex="0">
<p>Specifications content goes here.</p>
</div>
</div>The first button and panel start active: the trigger has active and aria-selected="true", while its panel has show active. The other trigger is not selected and its panel is hidden until activated. The trigger’s target and controls identify the panel; the panel’s label points back to the trigger. Bootstrap’s 5.2 tab example and plugin documentation show this relationship pattern, including focusable panels.
Choose the right tab style and control
Tabs, pills, and underline are presentation choices; none determines whether an interface is accessible. Bootstrap documents these styles for navigation, and its tab plugin can drive dynamic panels with tab or pill triggers.
- Tabs: use
.nav-tabsfor the familiar bordered tab treatment. - Pills: use
.nav-pillswhen a filled or rounded selection style better fits the design. - Underline: use
.nav-underlinefor a lighter visual treatment. - Buttons or links: prefer buttons when a trigger changes local content. Use links when the action navigates to a page or location, and do not present navigation links as a dynamic tab interface unless they actually control associated panels.
Horizontal and vertical layouts are both possible, but changing orientation does not change the need for correct roles, state, and panel relationships.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Keyboard and screen-reader behavior to check
Bootstrap’s tab plugin manages focus among tab triggers using a roving tabindex and arrow-key navigation. Its documented behavior moves to the previous control with Left or Up Arrow and to the next with Right or Down Arrow, including in vertical tab lists. A panel may need tabindex="0" to make it reachable when its first meaningful child is not already focusable.
Rank #3
- Use Tab to reach the active tab control, then test arrow keys to move among triggers.
- Confirm that activating each trigger exposes its associated panel and updates which trigger is selected.
- Check that keyboard focus remains visible and that panel content can be reached naturally.
- Test with a screen reader as well as a keyboard; visual styling alone does not convey the interface’s role or selected state.
Bootstrap’s accessibility guidance notes that components may require additional ARIA, attributes, or JavaScript, and warns that some default color combinations may not meet WCAG 2.2 contrast recommendations. Check the actual active, inactive, focus, and disabled colors in your design, rather than assuming the defaults are sufficient: Bootstrap accessibility documentation.
Avoid dropdowns inside dynamic tabs
Do not put dropdown menus inside an interface controlled by Bootstrap’s tab plugin. The project’s documentation says the plugin does not support tabbed interfaces containing dropdown menus because they create usability and accessibility issues. Keep dropdown navigation outside the dynamic tab list or choose a different interaction pattern.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Match the example to your Bootstrap version
The markup here uses Bootstrap 5 conventions, including data-bs-toggle="tab" and data-bs-target. Bootstrap’s documentation version reviewed for this article is 5.3, with 5.2 consulted for plugin and accessibility details. If your project uses another Bootstrap version, follow that version’s documentation rather than assuming these attributes and patterns apply unchanged. The available evidence does not identify “V10” as an official Bootstrap release.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
