BootstrapHow-ToBeginner · 4 min read

How to Create Tabs in Bootstrap: Simple Guide with Examples

To create tabs in Bootstrap, use a nav element with nav-tabs class for tab buttons and a tab-content container with tab-pane classes for tab panels. Link each tab button to its panel using data-bs-toggle="tab" and matching data-bs-target attributes.

📐

Syntax

Bootstrap tabs require two main parts: the tab navigation and the tab content. The navigation uses <ul> or <nav> with nav nav-tabs classes. Each tab button has data-bs-toggle="tab" and a target to show the correct content. The content uses tab-content container with child tab-pane elements, each having a unique ID linked from the tab buttons.

html

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content here.</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content here.</div>
</div>

💻

Example

This example shows a simple Bootstrap tab interface with two tabs: Home and Profile. Clicking each tab changes the visible content below.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Tabs Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
      </li>
    </ul>
    <div class="tab-content p-3 border border-top-0">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <p>Welcome to the Home tab content.</p>
      </div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <p>This is the Profile tab content.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with two tabs labeled 'Home' and 'Profile'. The Home tab is active by default showing its content. Clicking the Profile tab switches the visible content to the Profile text.

⚠️

Common Pitfalls

Forgetting to include Bootstrap's JavaScript bundle will prevent tabs from switching.
Not matching data-bs-target or href attributes with the correct id of tab panes causes tabs not to work.
Missing active class on the first tab and pane can make tabs appear empty initially.
Using <a> tags without role="tab" and ARIA attributes reduces accessibility.

html

<!-- Wrong: Missing active class and mismatched targets -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#wrong-id">Tab 1</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane" id="correct-id">Content</div>
</div>

<!-- Right: Matching IDs and active classes -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#correct-id">Tab 1</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="correct-id">Content</div>
</div>

📊

Quick Reference

Bootstrap Tabs Cheat Sheet:

nav nav-tabs: Class for tab buttons container.
nav-link: Class for each tab button.
data-bs-toggle="tab": Attribute to enable tab switching.
data-bs-target="#id": Points to the tab pane to show.
tab-content: Container for tab panes.
tab-pane: Class for each tab panel.
active and show: Classes to show the active tab and pane.

✅

Key Takeaways

Use nav nav-tabs for tab buttons and tab-content with tab-pane for content panels.

Each tab button needs data-bs-toggle="tab" and a matching data-bs-target or href to its pane's ID.

Include Bootstrap's JavaScript bundle for tabs to work properly.

Always set the first tab and pane as active with active and show classes.

Add ARIA roles and attributes for better accessibility.