OpenSourceVarsity

pdf icons

Bootstrap Tabs Tutorial

Bootstrap provides an easy way to create basic nav components like as tabs and pills. All the Bootstrap’s nav components – tabs and pills – share the same base markup and styles through the .nav class.

Tabs add quick, dynamic functionality to transition through panes of local content, even via dropdown menus.

NOTE: Nested tabs are not supported.

For creating basic Bootstrap Tab download our example. The output of the example is as shown in diagram 1.

Bootstrap Tab Example Diagram 1

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.

Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.

Fade effect

To make tabs fade in, add the class .fade to each .tab-pane.

NOTE: The first tab pane must also have .in to properly fade in initial content.

<div class="tab-content">
 <div role="tabpanel" class="tab-pane fade in active" id="home">......</div>
 <div role="tabpanel" class="tab-pane fade" id="profile">......</div>
 <div role="tabpanel" class="tab-pane fade" id="messages">......</div>
 <div role="tabpanel" class="tab-pane fade" id="settings">......</div>
</div>

Events

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

Event Type: Description:
hide.bs.tab

hidden.bs.tab

These 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.

show.bs.tab

shown.bs.tab

These event fires on tab displayed, but before the new tab have been shown.

Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

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

If you are a competent HTML5 / CSS3 / -JavaScript programmer we are sure you will be able to change the code of the web page modal window we’ve written to make the code snappier and perhaps a tad shorter.

Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an Email and we’d be happy to put up your code spec for download via our website.

Should you have any queries about the Bootstrap Tab examples code do post these in the Bootstrap 3 section of the OpenSourceVarsity forum.

We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you.

Click to download our tab example

 

October 18, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X