Tabs & Pills
Tabs and pills switch between panels of content without leaving the page.
In this page:
Syntax
<ul class="nav nav-tabs">
<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#pane-id">Tab</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="pane-id">content</div>
</div>Tabs & Pills
Use .nav-tabs or .nav-pills with buttons carrying data-bs-toggle="tab" and data-bs-target pointing to .tab-pane elements inside .tab-content.
The first pane has .show.active.
Add role and aria attributes for accessibility. The JS bundle handles switching.
Note:
Use buttons with role="tab" for tabs, not anchors, for better semantics.
Example: Tabs & Pills
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#t1" type="button" role="tab">Profile</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#t2" type="button" role="tab">Settings</button></li>
</ul>
<div class="tab-content border border-top-0 p-3">
<div class="tab-pane fade show active" id="t1" role="tabpanel">Profile content</div>
<div class="tab-pane fade" id="t2" role="tabpanel">Settings content</div>
</div>
<ul class="nav nav-pills mt-3"><li class="nav-item"><a class="nav-link active" href="#">Pill</a></li><li class="nav-item"><a class="nav-link" href="#">Pill two</a></li></ul>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Missing show active on the first pane
- Mismatched target ids
- Forgetting the JS bundle
Chapter Summary
- nav-tabs or nav-pills
- data-bs-toggle="tab" with a target
- tab-content holds tab-pane elements
- First pane is show active
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: