Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 JS Tab

Tab CSS Classes

Tabs are used to separate content into different panes where each pane is viewable one at a time.

Class Description
.nav nav-tabs Creates navigation tabs
.nav nav-pills Creates navigation pills
.nav-item Creates tab items
.nav-link Styles links inside the navigation tab
.nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs are stacked
.tab-content Together with .tab-pane and data-toggle="tab", it makes the tab toggleable
.tab-pane Together with .tab-content and data-toggle="tab", it makes the tab toggleable

For a tutorial about Tabs, visit our Bootstrap 4 Tabs/Pills Tutorial.


Via data-* Attributes

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Use these data attributes on .nav-tabs or .nav-pills.

Run code

Via JavaScript

Enable tabbable tabs via JavaScript (each tab needs to be activated individually).

Run code

Tab Methods

The following table lists all available tab methods:

Method Description
$().tab("show") Shows the tab

Tab Events

The following table lists all available tab events:

Event Description Example
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. Demo
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. Demo
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. Demo
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. Demo

When showing a new tab, the events fire in the following order:

  • hide.bs.tab (on the current active tab)
  • show.bs.tab (on the to-be-shown tab)
  • hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
  • shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Use jQuery's event.target and event.relatedTarget to get the active tab and the previous active tab:

Run code