Bootstrap

Bootstrap is a popular, open-source front-end framework used for designing responsive and mobile-first websites. Originally developed by Twitter, it provides a collection of pre-styled components, grid systems, and JavaScript plugins. Bootstrap simplifies the process of creating modern, visually appealing user interfaces, and it works seamlessly across different screen sizes and devices.

Bootstrap Tabs and Pills

17 April 2025 | Category:

Bootstrap Tutorial: Create Tabs and Pills Navigation

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Tabs and Pills classes to create sleek navigation for switching between content sections. We’ll pair them with images for a vibrant look.

What You’ll Learn

  • Creating basic tabs
  • Using pills navigation
  • Adding active states
  • Combining tabs/pills with images

Prerequisites

  • Basic knowledge of HTML
  • A text editor (e.g., VS Code, Notepad)
  • A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Tabs and Pills

Bootstrap Tabs and Pills use the nav class with nav-tabs or nav-pills to create navigation menus that toggle content. Tabs have a bordered, card-like style, while Pills are rounded and button-like, ideal for switching content panes.

Assume Bootstrap CSS and JS are included in your project (we’ll skip the <link> and <script> tags as requested).

Step 2: Create Basic Tabs

Start with a tabbed navigation to switch content. Use this code:

<div class="container">
    <h3>Basic Tabs</h3>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#tab1">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tab2">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tab3">Contact</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <p>Welcome to the Home tab.</p>
        </div>
        <div class="tab-pane" id="tab2">
            <p>View your Profile details here.</p>
        </div>
        <div class="tab-pane" id="tab3">
            <p>Contact us for support.</p>
        </div>
    </div>
</div>

Explanation:

  • container: Centers and constrains content.
  • nav nav-tabs: Creates a tabbed navigation bar.
  • nav-item and nav-link: Style each tab link.
  • data-bs-toggle="tab" href="#tab1": Links the tab to its content.
  • tab-content and tab-pane: Manage the content sections.
  • active: Shows the first tab and content by default.

Clicking a tab switches the displayed content.

Step 3: Use Pills Navigation

Create a Pills-style navigation for a rounded look. Try this:

<div class="container">
    <h3>Pills Navigation</h3>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="pill" href="#pill1">Overview</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#pill2">Stats</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#pill3">Settings</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="pill1">
            <p>This is the Overview section.</p>
        </div>
        <div class="tab-pane" id="pill2">
            <p>Check your Stats here.</p>
        </div>
        <div class="tab-pane" id="pill3">
            <p>Adjust Settings as needed.</p>
        </div>
    </div>
</div>

Explanation:

  • nav nav-pills: Creates a rounded, button-like navigation.
  • data-bs-toggle="pill": Links pills to content (similar to tabs).
  • active: Highlights the first pill and shows its content.

Pills offer a softer, modern navigation style.

Step 4: Add Contextual Styling

Use Bootstrap’s contextual classes for colored Pills. Add this:

<div class="container">
    <h3>Colored Pills</h3>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active bg-success text-white" data-bs-toggle="pill" href="#colorPill1">Success</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="pill" href="#colorPill2">Info</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="colorPill1">
            <p>Success! Action completed.</p>
        </div>
        <div class="tab-pane" id="colorPill2">
            <p>View information here.</p>
        </div>
    </div>
</div>

Explanation:

  • bg-success text-white: Green background with white text for the active pill.
  • nav-pills: Maintains the rounded style.
  • tab-content: Switches content based on the selected pill.

The green pill highlights the active state vibrantly.

Step 5: Combine with an Image

Pair tabs with a dummy image for a gallery-like context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Content Tabs</h3>
            <p>Switch between sections.</p>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#gallery1">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#gallery2">Details</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="gallery1">
                    <p>Browse our gallery content.</p>
                </div>
                <div class="tab-pane" id="gallery2">
                    <p>View detailed information.</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

  • row and col-8, col-4: Splits content into tabs/text (8 units) and image (4 units).
  • nav-tabs: Creates a tabbed navigation.
  • Uses a 200×150 green image for vibrancy.

The image suggests a visual context for the tabs.

Final Code

Here’s a combined example with varied tabs/pills and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Tabs</h3>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#simpleTab1">News</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#simpleTab2">Events</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="simpleTab1">
                    <p>Latest news updates.</p>
                </div>
                <div class="tab-pane" id="simpleTab2">
                    <p>Upcoming events.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Colored Pills</h3>
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active bg-primary text-white" data-bs-toggle="pill" href="#pillTab1">Tasks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#pillTab2">Reports</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="pillTab1">
                    <p>Manage your tasks.</p>
                </div>
                <div class="tab-pane" id="pillTab2">
                    <p>View report summaries.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Project Sections</h3>
            <p>Explore project details.</p>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#projectTab1">Overview</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#projectTab2">Progress</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="projectTab1">
                    <p>Project overview here.</p>
                </div>
                <div class="tab-pane" id="projectTab2">
                    <p>Track project progress.</p>
                </div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

  • A row with simple tabs (News active, Events).
  • A row with colored pills (Tasks active in blue, Reports).
  • A two-column section with tabs (Overview active, Progress), text, and a red image (250×150).
  • All tabs and pills are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

  • Check the Bootstrap Navs and Tabs Docs for more options.
  • Try nav-justified for equal-width tabs.
  • Use tabs/pills in Bootstrap cards for structured layouts.

Conclusion

You’ve mastered Bootstrap Tabs and Pills! With classes like nav-tabs, nav-pills, and tab-content, plus striking images, you’ve created stylish, interactive navigation. Keep experimenting to enhance your webpages.