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 an easy and 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. The 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.

  • <ul class="nav nav-tabs">
  •     <li class="active"><a href="#">Home</a></li>
  •     <li><a href="#">Profile</a></li>
  •     <li><a href="#">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 component without writing any JavaScript — simply specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content. The following example will show you how to create a basic tabbable tabs via data attributes in Bootstrap.

  • <ul class="nav nav-tabs">
  •     <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
  •     <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
  •     <li class="dropdown">
  •         <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
  •         <ul class="dropdown-menu">
  •             <li><a data-toggle="tab" href="#dropdown1">Dropdown 1</a></li>
  •             <li><a data-toggle="tab" href="#dropdown2">Dropdown 2</a></li>
  •         </ul>
  •     </li>
  • </ul>
  • <div class="tab-content">
  •     <div id="sectionA" class="tab-pane fade in active">
  •         <p>Section A content…</p>
  •     </div>
  •     <div id="sectionB" class="tab-pane fade">
  •         <p>Section B content…</p>
  •     </div>
  •     <div id="dropdown1" class="tab-pane fade">
  •         <p>Dropdown 1 content…</p>
  •     </div>
  •     <div id="dropdown2" class="tab-pane fade">
  •         <p>Dropdown 2 content…</p>
  •     </div>
  • </div>

Creating Dynamic Tabs via JavaScript

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

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

You can activate individual tabs in several ways:

  • $('#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(2) a").tab('show'); // show third tab (0-indexed, like an array)

Methods

This is the standard bootstrap's tab method:

$().tab('show')

Activates a tab element and the related content container. Tab should have either a data-target or an href for targeting a container node in the DOM.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("#myTab li:eq(1) a").tab('show');
  • })
  • </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.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('a[data-toggle="tab"]').on('shown', function(e){
  •         e.target // active tab
  •         e.relatedTarget // previous tab
  •     })
  • });
  • </script>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.