Bootstrap Tabs and Pills

Website navigation is a cornerstone of user experience, and Bootstrap makes it effortless with Tabs and Pills. These components organize content into distinct sections, ensuring a clean and intuitive layout.

In this guide from TheCodingCollege.com, you’ll learn how to create, customize, and enhance Bootstrap Tabs and Pills to simplify navigation on your website.

What Are Bootstrap Tabs and Pills?

Bootstrap Tabs and Pills are navigation components that display different content panels based on user interaction. While Tabs have a classic rectangular design, Pills offer a rounded alternative, both serving the same purpose of organized navigation.

Key Features:

  • Easy toggling between content sections.
  • Fully responsive and customizable.
  • Enhance user engagement and accessibility.

Basic Syntax for Bootstrap Tabs

Bootstrap Tabs are built using an unordered list (<ul>) and a corresponding content section.

Basic Tab Example:

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#contact" data-toggle="tab">Contact</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>Home</h3>
        <p>Welcome to the Home tab!</p>
    </div>
    <div id="profile" class="tab-pane fade">
        <h3>Profile</h3>
        <p>Here is your profile information.</p>
    </div>
    <div id="contact" class="tab-pane fade">
        <h3>Contact</h3>
        <p>Reach out to us anytime.</p>
    </div>
</div>

Understanding the Classes

  1. nav-tabs: Creates the tab navigation.
  2. active: Marks the initially selected tab.
  3. tab-pane: Styles the content panels.
  4. fade: Adds a fade animation when switching tabs.
  5. in: Ensures the active content is visible.

Bootstrap Pills

Bootstrap Pills offer a rounded style for navigation.

Basic Pills Example:

<ul class="nav nav-pills">
    <li class="active"><a href="#dashboard" data-toggle="tab">Dashboard</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
    <li><a href="#help" data-toggle="tab">Help</a></li>
</ul>
<div class="tab-content">
    <div id="dashboard" class="tab-pane fade in active">
        <h3>Dashboard</h3>
        <p>Welcome to the Dashboard tab!</p>
    </div>
    <div id="settings" class="tab-pane fade">
        <h3>Settings</h3>
        <p>Manage your account settings here.</p>
    </div>
    <div id="help" class="tab-pane fade">
        <h3>Help</h3>
        <p>Find FAQs and support here.</p>
    </div>
</div>

Vertical Tabs and Pills

Both Tabs and Pills can be aligned vertically for sidebar-style navigation.

Vertical Tabs Example:

<div class="row">
    <div class="col-sm-3">
        <ul class="nav nav-tabs nav-stacked">
            <li class="active"><a href="#section1" data-toggle="tab">Section 1</a></li>
            <li><a href="#section2" data-toggle="tab">Section 2</a></li>
            <li><a href="#section3" data-toggle="tab">Section 3</a></li>
        </ul>
    </div>
    <div class="col-sm-9">
        <div class="tab-content">
            <div id="section1" class="tab-pane fade in active">
                <h3>Section 1</h3>
                <p>Content for Section 1.</p>
            </div>
            <div id="section2" class="tab-pane fade">
                <h3>Section 2</h3>
                <p>Content for Section 2.</p>
            </div>
            <div id="section3" class="tab-pane fade">
                <h3>Section 3</h3>
                <p>Content for Section 3.</p>
            </div>
        </div>
    </div>
</div>

Vertical Pills Example:

Change nav-tabs to nav-pills in the example above for a rounded look.

Adding Dropdowns to Tabs and Pills

Bootstrap Tabs and Pills can include dropdown menus for additional navigation options.

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
            <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
        <h3>Tab 1</h3>
        <p>Content for Tab 1.</p>
    </div>
    <div id="tab2" class="tab-pane fade">
        <h3>Tab 2</h3>
        <p>Content for Tab 2.</p>
    </div>
    <div id="tab3" class="tab-pane fade">
        <h3>Tab 3</h3>
        <p>Content for Tab 3.</p>
    </div>
</div>

Customizing Tabs and Pills

Bootstrap Tabs and Pills can be styled and customized to fit your website’s theme.

Customizing Active Tab Colors

<style>
    .nav-tabs > .active > a, .nav-tabs > .active > a:hover {
        background-color: #007bff;
        color: white;
    }
</style>

Centered Tabs

Center-align the Tabs or Pills using CSS.

<style>
    .nav-tabs {
        justify-content: center;
    }
</style>

Responsive Tabs and Pills

Bootstrap Tabs and Pills are fully responsive. On smaller screens, they automatically adapt, but you can further optimize their behavior using media queries or converting them into an accordion-style menu.

Best Practices for Using Bootstrap Tabs and Pills

  1. Keep Labels Clear: Ensure tab labels are meaningful and concise.
  2. Use Pills for Modern Design: Pills often look more modern and rounded.
  3. Provide Feedback: Highlight the active tab to guide users effectively.
  4. Test for Accessibility: Use proper aria attributes for screen reader compatibility.

Conclusion

Bootstrap Tabs and Pills are powerful tools for organizing website content. Whether you’re building a dashboard, a multi-step form, or an FAQ page, Tabs and Pills ensure clean, responsive, and user-friendly navigation.

Leave a Comment