Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS Tab


JS Tab (tab.js)

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

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


The Tab Plugin Classes

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

Via data-* Attributes

Add data-toggle="tab" to each tab, and add a .tab-pane class with a unique ID for every tab and wrap them in a .tab-content class.

Example

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>
Try it Yourself »


Via JavaScript

Enable manually with:

Example

// Select all tabs
$('.nav-tabs a').click(function(){
  $(this).tab('show');
})

// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')

// Select first tab
$('.nav-tabs a:first').tab('show')

// Select last tab
$('.nav-tabs a:last').tab('show')

// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Try it Yourself »

Tab Options

None

Tab Methods

The following table lists all available tab methods.

Method Description Try it
.tab("show") Shows the tab Try it

Tab Events

The following table lists all available tab events.

Event Description Try it
show.bs.tab Occurs when the tab is about to be shown. Try it
shown.bs.tab Occurs when the tab is fully shown (after CSS transitions have completed) Try it
hide.bs.tab Occurs when the tab is about to be hidden Try it
hidden.bs.tab Occurs when the tab is fully hidden (after CSS transitions have completed) Try it

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

Example

$('.nav-tabs a').on('shown.bs.tab', function(event){
  var x = $(event.target).text();         // active tab
  var y = $(event.relatedTarget).text();  // previous tab
});
Try it Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.