Bootstrap Tabs

In this tutorial you will learn how to create dynamic tabs to toggle between the content using the Bootstrap tabs plugin.

Creating Tabs with Bootstrap

Tab based navigations provides a powerful mechanism to handle huge amount of content within a small area through separating content into different panes where each pane is viewable one at a time.

User can quickly access the content through switching between the panes without leaving the page. The following example will show you how to create the basic tabs using the Bootstrap tab component.

Example

Try this code »

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#" class="nav-link active">Home</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Messages</a>
    </li>
</ul>

— The output of the above example will look something like this:

The tabs plugin also works with pills nav. To create pill nav just replace the class .nav-tabs with .nav-pills in the tab markup, as shown in the following example:

Example

Try this code »

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Home</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Messages</a>
    </li>
</ul>

— The output of the above example will look something like this:

Creating Dynamic Tabs via Data Attributes

You can activate a tab or pill navigation without writing any JavaScript code — simply specify the data-bs-toggle="tab" on each tab, or data-bs-toggle="pill" on each pill, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

Let's take a look at an example to understand how to create dynamic tabs via data attributes.

Example

Try this code »

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a>
    </li>
    <li class="nav-item">
        <a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="home">
        <p>Home tab content ...</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Profile tab content ...</p>
    </div>
    <div class="tab-pane fade" id="messages">
        <p>Messages tab content ...</p>
    </div>
</div>

Tip: The .fade class is added to each .tab-pane to make tabs fade in while showing new tab content. Also, you must add .active class to a .nav-link, as well as .show and .active classes to the corresponding .tab-pane to make it initially visible.

Creating Dynamic Tabs via JavaScript

You may also enable tabs via JavaScript. Each tab needs to be activated individually.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var tabList = [].slice.call(document.querySelectorAll("#myTab a"));
    tabList.forEach(function(tab){
        var tabTrigger = new bootstrap.Tab(tab);

        tab.addEventListener("click", function(event){
            event.preventDefault();
            tabTrigger.show();
        });
    });
});
</script>

You can activate individual tabs in several ways. Let's take a look at the following example:

Example

jQuery JavaScript

Try this code »

$('#myTab a[href="#profile"]').tab("show"); // show tab targeted by the selector
$("#myTab a:first").tab("show"); // show first tab
$("#myTab a:last").tab("show"); // show last tab
$("#myTab li:eq(1) a").tab("show"); // show second tab (0-indexed, like an array)

// Show tab targeted by the selector
var profileTabElement = document.querySelector('#myTab a[href="#profile"]');
var profileTab = new bootstrap.Tab(profileTabElement);
profileTab.show();

// Show first tab
var firstTabElement = document.querySelector("#myTab li:first-child a");
var firstTab = new bootstrap.Tab(firstTabElement);
firstTab.show();

// Show last tab
var lastTabElement = document.querySelector("#myTab li:last-child a");
var lastTab = new bootstrap.Tab(lastTabElement);
lastTab.show();

// Show second tab (0-indexed, like an array);
var secondTabElement = document.querySelectorAll("#myTab li")[1].firstElementChild;
var secondTab = new bootstrap.Tab(secondTabElement);
secondTab.show();

Methods

This is the standard bootstrap's tab method:

show

Activates the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myTab a:last").tab("show"); // show last tab
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    // Show last tab
    var lastTabElement = document.querySelector("#myTab li:last-child a");
    var lastTab = new bootstrap.Tab(lastTabElement);
    lastTab.show();
});
</script>

dispose

This method destroys an element's tab (i.e. removes stored data on the DOM element).

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:last")[0]);
        console.log(lastTab);
        // {_element: a.nav-link}

        $("#myTab a:last").tab("dispose");
        console.log(lastTab);
        // {_element: null}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.querySelector("#myTab li:last-child a");

    btn.addEventListener("click", function(){
        var lastTab = bootstrap.Tab.getInstance(element);
        console.log(lastTab);
        // {_element: a.nav-link}

        lastTab.dispose();
        console.log(lastTab);
        // {_element: null}
    });
});
</script>

getInstance

This is a static method which allows you to get the tab instance associated with a DOM element.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    // Get tab instance on button click
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.querySelector("#myTab li:first-child a");

    // Get tab instance on button click
    btn.addEventListener("click", function(){
        var firstTab = bootstrap.Tab.getInstance(element);
        console.log(firstTab);
        // {_element: a.nav-link.active}
    });
});
</script>

getOrCreateInstance

This is a static method which allows you to get the tab instance associated with a DOM element, or create a new one in case if the tab wasn't initialized.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    // Get or create tab instance on button click
    $("#myBtn").click(function(){
        var lastTab = bootstrap.Tab.getOrCreateInstance($("#myTab a:first")[0]);
        console.log(lastTab);
        // {_element: a.nav-link.active}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.querySelector("#myTab li:first-child a");

    // Get or create tab instance on button click
    btn.addEventListener("click", function(){
        var firstTab = bootstrap.Tab.getOrCreateInstance(element);
        console.log(firstTab);
        // {_element: a.nav-link.active}
    });
});
</script>

Events

These are the standard Bootstrap events to enhance the tab functionality.

Event	Description
show.bs.tab	This event fires on tab show, but before the new tab has been shown. You can use the `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab	This event fires on tab show after a tab has been shown. You can use the `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab	This event fires when the current active tab is to be hidden and thus a new tab is to be shown. You can use the `event.target` and `event.relatedTarget` to target the current active tab and the new tab which is going to be active very soon, respectively.
hidden.bs.tab	This event fires after the previous active tab is hidden and a new tab is shown. You can use the `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

The following example displays the names of active tab and previous tab to the user when transition of a tab has been fully completed.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $('a[data-bs-toggle="tab"]').on("shown.bs.tab", function(e){
        console.log(e.target); // newly activated tab
        console.log(e.relatedTarget); // previous active tab
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var tabList = [].slice.call(document.querySelectorAll('a[data-bs-toggle="tab"]'));
    tabList.forEach(function(tab){
        tab.addEventListener("shown.bs.tab", function(e){
            console.log(e.target); // newly activated tab
            console.log(e.relatedTarget); // previous active tab
        });
    });
});
</script>

Previous Page Next Page

Bootstrap Tabs

Creating Tabs with Bootstrap

Example

Example

Creating Dynamic Tabs via Data Attributes

Example

Creating Dynamic Tabs via JavaScript

Example

Example

Methods

show

Example

dispose

Example

getInstance

Example

getOrCreateInstance

Example

Events

Example

About Us

Contact

Interactive Tools