Tabs

Use the tab JavaScript plugin to extend navigational tabs and pills to create tabbable panes of local content.

Basic Example
Fill And Justify
With Dropdowns

Basic Example #

Tabs are one of the most commonly used components for organizing content on a page. To display the current state, inside each .nav-link there must be an empty element with the class .nav-link-sa-indicator .

Example

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button
            class="nav-link active"
            id="home-tab-1"
            data-bs-toggle="tab"
            data-bs-target="#home-tab-content-1"
            type="button"
            role="tab"
            aria-controls="home-tab-content-1"
            aria-selected="true"
        >
            Home<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button
            class="nav-link"
            id="profile-tab-1"
            data-bs-toggle="tab"
            data-bs-target="#profile-tab-content-1"
            type="button"
            role="tab"
            aria-controls="profile-tab-content-1"
            aria-selected="true"
        >
            Profile<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button
            class="nav-link"
            id="contact-tab-1"
            data-bs-toggle="tab"
            data-bs-target="#contact-tab-content-1"
            type="button"
            role="tab"
            aria-controls="contact-tab-content-1"
            aria-selected="true"
        >
            Contact<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
</ul>
<div class="tab-content mt-4">
    <div
        class="tab-pane fade show active"
        id="home-tab-content-1"
        role="tabpanel"
        aria-labelledby="home-tab-1"
    >
        <p class="mb-0">
            This is some placeholder content the Home tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="profile-tab-content-1"
        role="tabpanel"
        aria-labelledby="profile-tab-1"
    >
        <p class="mb-0">
            This is some placeholder content the Profile tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="contact-tab-content-1"
        role="tabpanel"
        aria-labelledby="contact-tab-1"
    >
        <p class="mb-0">
            This is some placeholder content the Contact tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
</div>

The same example, but inside the card.

Example

<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button
                    class="nav-link active"
                    id="home-tab-2"
                    data-bs-toggle="tab"
                    data-bs-target="#home-tab-content-2"
                    type="button"
                    role="tab"
                    aria-controls="home-tab-content-2"
                    aria-selected="true"
                >
                    Home<span class="nav-link-sa-indicator"></span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button
                    class="nav-link"
                    id="profile-tab-2"
                    data-bs-toggle="tab"
                    data-bs-target="#profile-tab-content-2"
                    type="button"
                    role="tab"
                    aria-controls="profile-tab-content-2"
                    aria-selected="true"
                >
                    Profile<span class="nav-link-sa-indicator"></span>
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button
                    class="nav-link"
                    id="contact-tab-2"
                    data-bs-toggle="tab"
                    data-bs-target="#contact-tab-content-2"
                    type="button"
                    role="tab"
                    aria-controls="contact-tab-content-2"
                    aria-selected="true"
                >
                    Contact<span class="nav-link-sa-indicator"></span>
                </button>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div
                class="tab-pane fade show active"
                id="home-tab-content-2"
                role="tabpanel"
                aria-labelledby="home-tab-2"
            >
                <p class="mb-0">
                    This is some placeholder content the Home tab&#x27;s associated
                    content. Clicking another tab will toggle the visibility of this one
                    for the next. The tab JavaScript swaps classes to control the content
                    visibility and styling. You can use it with tabs, pills, and any other
                    <code>.nav</code>-powered navigation.
                </p>
            </div>
            <div
                class="tab-pane fade"
                id="profile-tab-content-2"
                role="tabpanel"
                aria-labelledby="profile-tab-2"
            >
                <p class="mb-0">
                    This is some placeholder content the Profile tab&#x27;s associated
                    content. Clicking another tab will toggle the visibility of this one
                    for the next. The tab JavaScript swaps classes to control the content
                    visibility and styling. You can use it with tabs, pills, and any other
                    <code>.nav</code>-powered navigation.
                </p>
            </div>
            <div
                class="tab-pane fade"
                id="contact-tab-content-2"
                role="tabpanel"
                aria-labelledby="contact-tab-2"
            >
                <p class="mb-0">
                    This is some placeholder content the Contact tab&#x27;s associated
                    content. Clicking another tab will toggle the visibility of this one
                    for the next. The tab JavaScript swaps classes to control the content
                    visibility and styling. You can use it with tabs, pills, and any other
                    <code>.nav</code>-powered navigation.
                </p>
            </div>
        </div>
    </div>
</div>

Fill And Justify #

Force your .nav 's contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-item s, use .nav-fill . Notice that all horizontal space is occupied, but not every nav item has the same width.

Example

This is some placeholder content the Much longer nav link tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

<ul class="nav nav-tabs nav-fill" role="tablist">
    <li class="nav-item" role="presentation">
        <button
            class="nav-link active"
            id="home-tab-3"
            data-bs-toggle="tab"
            data-bs-target="#home-tab-content-3"
            type="button"
            role="tab"
            aria-controls="home-tab-content-3"
            aria-selected="true"
        >
            Home<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button
            class="nav-link"
            id="profile-tab-3"
            data-bs-toggle="tab"
            data-bs-target="#profile-tab-content-3"
            type="button"
            role="tab"
            aria-controls="profile-tab-content-3"
            aria-selected="true"
        >
            Profile<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button
            class="nav-link"
            id="much-longer-nav-link-tab-3"
            data-bs-toggle="tab"
            data-bs-target="#much-longer-nav-link-tab-content-3"
            type="button"
            role="tab"
            aria-controls="much-longer-nav-link-tab-content-3"
            aria-selected="true"
        >
            Much longer nav link<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
</ul>
<div class="tab-content mt-4">
    <div
        class="tab-pane fade show active"
        id="home-tab-content-3"
        role="tabpanel"
        aria-labelledby="home-tab-3"
    >
        <p class="mb-0">
            This is some placeholder content the Home tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="profile-tab-content-3"
        role="tabpanel"
        aria-labelledby="profile-tab-3"
    >
        <p class="mb-0">
            This is some placeholder content the Profile tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="much-longer-nav-link-tab-content-3"
        role="tabpanel"
        aria-labelledby="much-longer-nav-link-tab-3"
    >
        <p class="mb-0">
            This is some placeholder content the Much longer nav link tab&#x27;s
            associated content. Clicking another tab will toggle the visibility of this
            one for the next. The tab JavaScript swaps classes to control the content
            visibility and styling. You can use it with tabs, pills, and any other
            <code>.nav</code>-powered navigation.
        </p>
    </div>
</div>

For equal-width elements, use .nav-justified . All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.

Example

<ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="nav-item" role="presentation">
        <button
            class="nav-link active"
            id="home-tab-4"
            data-bs-toggle="tab"
            data-bs-target="#home-tab-content-4"
            type="button"
            role="tab"
            aria-controls="home-tab-content-4"
            aria-selected="true"
        >
            Home<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button
            class="nav-link"
            id="profile-tab-4"
            data-bs-toggle="tab"
            data-bs-target="#profile-tab-content-4"
            type="button"
            role="tab"
            aria-controls="profile-tab-content-4"
            aria-selected="true"
        >
            Profile<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button
            class="nav-link"
            id="much-longer-nav-link-tab-4"
            data-bs-toggle="tab"
            data-bs-target="#much-longer-nav-link-tab-content-4"
            type="button"
            role="tab"
            aria-controls="much-longer-nav-link-tab-content-4"
            aria-selected="true"
        >
            Much longer nav link<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
</ul>
<div class="tab-content mt-5">
    <div
        class="tab-pane fade show active"
        id="home-tab-content-4"
        role="tabpanel"
        aria-labelledby="home-tab-4"
    >
        <p class="mb-0">
            This is some placeholder content the Home tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="profile-tab-content-4"
        role="tabpanel"
        aria-labelledby="profile-tab-4"
    >
        <p class="mb-0">
            This is some placeholder content the Profile tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="much-longer-nav-link-tab-content-4"
        role="tabpanel"
        aria-labelledby="much-longer-nav-link-tab-4"
    >
        <p class="mb-0">
            This is some placeholder content the Much longer nav link tab&#x27;s
            associated content. Clicking another tab will toggle the visibility of this
            one for the next. The tab JavaScript swaps classes to control the content
            visibility and styling. You can use it with tabs, pills, and any other
            <code>.nav</code>-powered navigation.
        </p>
    </div>
</div>

With Dropdowns #

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Example

This is some placeholder content the Address tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav -powered navigation.

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button
            class="nav-link active"
            id="home-tab-5"
            data-bs-toggle="tab"
            data-bs-target="#home-tab-content-5"
            type="button"
            role="tab"
            aria-controls="home-tab-content-5"
            aria-selected="true"
        >
            Home<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button
            class="nav-link"
            id="profile-tab-5"
            data-bs-toggle="tab"
            data-bs-target="#profile-tab-content-5"
            type="button"
            role="tab"
            aria-controls="profile-tab-content-5"
            aria-selected="true"
        >
            Profile<span class="nav-link-sa-indicator"></span>
        </button>
    </li>
    <li class="nav-item dropdown" role="presentation">
        <button
            class="nav-link dropdown-toggle"
            data-bs-toggle="dropdown"
            data-bs-offset="0,0"
            aria-expanded="false"
        >
            Dropdown<span class="nav-link-sa-indicator"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <button
                    class="dropdown-item"
                    id="contact-tab-5"
                    data-bs-toggle="tab"
                    data-bs-target="#contact-tab-content-5"
                    type="button"
                    role="tab"
                    aria-controls="contact-tab-content-5"
                    aria-selected="false"
                >
                    Contact
                </button>
            </li>
            <li>
                <button
                    class="dropdown-item"
                    id="address-tab-5"
                    data-bs-toggle="tab"
                    data-bs-target="#address-tab-content-5"
                    type="button"
                    role="tab"
                    aria-controls="address-tab-content-5"
                    aria-selected="false"
                >
                    Address
                </button>
            </li>
        </ul>
    </li>
</ul>
<div class="tab-content mt-4">
    <div
        class="tab-pane fade show active"
        id="home-tab-content-5"
        role="tabpanel"
        aria-labelledby="home-tab-5"
    >
        <p class="mb-0">
            This is some placeholder content the Home tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="profile-tab-content-5"
        role="tabpanel"
        aria-labelledby="profile-tab-5"
    >
        <p class="mb-0">
            This is some placeholder content the Profile tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="contact-tab-content-5"
        role="tabpanel"
        aria-labelledby="contact-tab-5"
    >
        <p class="mb-0">
            This is some placeholder content the Contact tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
    <div
        class="tab-pane fade"
        id="address-tab-content-5"
        role="tabpanel"
        aria-labelledby="address-tab-5"
    >
        <p class="mb-0">
            This is some placeholder content the Address tab&#x27;s associated content.
            Clicking another tab will toggle the visibility of this one for the next. The
            tab JavaScript swaps classes to control the content visibility and styling.
            You can use it with tabs, pills, and any other <code>.nav</code>-powered
            navigation.
        </p>
    </div>
</div>