Create tabbable regions within the page.

In this article

This plugin is often used with the .nav element, however you are not restricted in terms of what HTML markup you can use.

If you’re interested in automatically generating an interactive tabs section from an existing static list (<ul> or <ol> element), refer to the Tabs plugin.


Use .tab on each of the elements containing tab content.

Via data attributes

Trigger elements, usually buttons or links, are used to reveal tabbed content on click. You can activate a tab navigation without writing any JavaScript by adding data-toggle="tab" to a trigger element and identifying the tab containing the content using the href (in the case of a link) or data-target attributes.

<ul class="nav" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link is-active" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-content-1" aria-selected="true">Tab 1</a>
    <a class="nav-link" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-content-2" aria-selected="false">Tab 2</a>
<div class="tab-content">
  <div class="tab fade is-shown is-active" id="tab-content-1" role="tabpanel">...</div>
  <div class="tab fade" id="tab-content-2" role="tabpanel">...</div>

Because data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.

The active trigger and tab elements must have .is-active applied.

Use .fade on each .tab to apply a fade transition. The active .tab element must also have .is-shown to make the content visible.


An additional class name to apply to the active trigger element can be specified by using the data-active-class attribute. For example, to apply a class name of .text-primary to apply the data-active-class="text-primary" to the trigger element.


Name Description Fires on tab show, but before the new tab has been shown.
tab.shown Fires after the tab has been shown.
tab.hide Fires on tab hide, after the tab has been hidden.
tab.hidden Fires after the tab has been hidden.

Use to target the tab being shown or hidden.

each('a[data-toggle="tab"]', function(a) {
  a.addEventListener('', function(e) { // newly activated tab
    e.relatedTarget // previous active tab, if any