Prev Next

Tabs and Pills: Creating Tabbed Navigation with Variations Like Pills and Vertical Tabs

Bootstrap 5 provides components for creating tabbed navigation, allowing users to switch between different content sections. These can be styled as classic tabs, pill-shaped tabs, or even arranged vertically for advanced layouts.

Key Topics

Basic Tabs

Create a basic tabbed navigation using the nav and nav-tabs classes.

<ul class="nav nav-tabs" id="basicTabs" 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>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
</ul>
<div class="tab-content" id="basicTabsContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">This is the Home tab content.</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is the Profile tab content.</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">This is the Contact tab content.</div>
</div>

Explanation: Use the nav-tabs class to style navigation as tabs. Each tab links to a tab-pane for its associated content.

Pill-Shaped Navigation

Style tabs as pill-shaped navigation using the nav-pills class.

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

Explanation: Replace nav-tabs with nav-pills for pill-shaped navigation tabs.

Vertical Tabs

Create vertical tabs using the flex-column class to stack the tabs vertically.

<div class="d-flex align-items-start">
    <div class="nav flex-column nav-pills me-3" id="verticalTabs" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="v-home-tab" data-bs-toggle="pill" data-bs-target="#v-home" type="button" role="tab" aria-controls="v-home" aria-selected="true">Home</button>
        <button class="nav-link" id="v-profile-tab" data-bs-toggle="pill" data-bs-target="#v-profile" type="button" role="tab" aria-controls="v-profile" aria-selected="false">Profile</button>
    </div>
    <div class="tab-content" id="verticalTabsContent">
        <div class="tab-pane fade show active" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">Vertical Home Content</div>
        <div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">Vertical Profile Content</div>
    </div>
</div>

Explanation: The flex-column class stacks the tabs vertically, while the nav-pills class styles them as pills.

Complete Tabs and Pills Example

The following example combines tabs, pills, and vertical layouts in a single example for versatility.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 my-4">
        <h2 class="text-center">Bootstrap Tabs and Pills</h2>
        <ul class="nav nav-tabs mb-3" id="completeTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="complete-home-tab" data-bs-toggle="tab" data-bs-target="#complete-home" type="button" role="tab" aria-controls="complete-home" aria-selected="true">Home</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="complete-profile-tab" data-bs-toggle="tab" data-bs-target="#complete-profile" type="button" role="tab" aria-controls="complete-profile" aria-selected="false">Profile</button>
            </li>
        </ul>
        <div class="tab-content" id="completeTabsContent">
            <div class="tab-pane fade show active" id="complete-home" role="tabpanel" aria-labelledby="complete-home-tab">Complete Home Content</div>
            <div class="tab-pane fade" id="complete-profile" role="tabpanel" aria-labelledby="complete-profile-tab">Complete Profile Content</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines standard tabs, pill navigation, and vertical tab layouts to showcase Bootstrap's versatility.

Key Takeaways

  • Use nav-tabs for classic tabbed navigation.
  • Use nav-pills for rounded, pill-shaped navigation tabs.
  • Combine flex-column with nav-pills to create vertical tab layouts.
  • Use tab-pane and data-bs-toggle attributes to link tabs to their content.
Prev Next