Tabs and Navs
4 min read Quiz at the end
Create tabbed interfaces with nav-tabs or nav-pills using data-bs-toggle and tab-pane fade.
Tabs and Navigation
<!-- Tabs -->
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">Tab 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">Tab 2</button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="tab1">Content 1</div>
<div class="tab-pane fade" id="tab2">Content 2</div>
</div>
<!-- Pills nav -->
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- Justified nav -->
<ul class="nav nav-tabs nav-fill">...</ul>
Topic Quiz · 2 questions
Test your understanding before moving on
1. What do Bootstrap tab buttons use?
💡 Bootstrap 5 tabs use button elements with data-bs-toggle and data-bs-target.
2. What class creates pill-style navigation?
💡 nav-pills creates rounded pill-style nav items.