Bootstrap Tabs and Pills

Examplehtml

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container my-3">
  <ul class="nav nav-tabs" id="tabs" role="tablist">
    <li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">Home</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">Profile</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab">Contact</button></li>
  </ul>
  <div class="tab-content border border-top-0 p-3">
    <div class="tab-pane fade show active" id="home" role="tabpanel">Home content</div>
    <div class="tab-pane fade" id="profile" role="tabpanel">Profile content</div>
    <div class="tab-pane fade" id="contact" role="tabpanel">Contact content</div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Open in editor »

Tabs use data-bs-toggle="tab" and data-bs-target to show the matching pane. Change nav-tabs to nav-pills for pill-shaped tabs.

Quick check

Which attribute points a tab button at its content pane?

data-bs-targethref onlydata-pane

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.