Basic Tab Content

Toggle tabbed content using Bootstrap tab JavaScript.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<ul class="nav nav-tabs" id="myTab">

<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">
Home
</button>
</li>

<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile">
Profile
</button>
</li>

</ul>

<div class="tab-content border p-3">

<div class="tab-pane fade show active" id="home">
Home content section.
</div>

<div class="tab-pane fade" id="profile">
Profile content section.
</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

More BS5 Navs & Tabs Examples (7)

Pills with Tab Content

Dashboard Tabs Example

← Vertical Nav

Pills with Tab Content →