3 examples to learn and use Bootstrap tab plugin

Bootstrap Tabs

Tabs is a nice way to present information that is categorized in the limited content area. For example, to display product information you can show tabs with product description in one tab, features in other tab, reviews in the third tab and so on. Similarly from niche to niche if you have different category of content and want to show at the same content area you can use Tabs.

Using Bootstrap framework makes it quite easier to create tabs in the web pages. The tab information is generally SEO friendly as well, that can be cached and ranked by google, bing or other search engines as such content is written in HTML elements.

This tutorial shows how to create tabs using Bootstrap tab.js plug-in. If you have included bootstrap.min.js or bootstrap.js then you do not need to include tab.js plugin separately.

Tabs basic example

The example below shows creating the basic bootstrap tabs by using mark-up (data-attribute). You do not need to write JavaScript for tabs in that case. Instead simply use data-toggle=tab or data-toggle=”pill” in the elements like <li> in unordered lists <ul>.  The following example applies nav nav-tabs class to <ul> (unordered-list) tag. While <li> will act as the tab after using the data-toggle=”tab” class.

To show the content of each tab, the example uses <div> element. The wrapper element, <div> is given the tab-content class while individual <div> representing each <tab> is given the tab-pane class. To make a tab active or visible use tab-pane active class. See the example below:

Experience this online

Tab example with fade effect

The following example creates a faded effect as a Tab is clicked. You simply need to add the fade to tab-pane class. At the first fade tab, you must place the fade in to make the fade effect work properly.

Experience this online

Tab example by JavaScript

Following example shows how to create the Bootstrap Tabs by using JavaScript. You simply display Tabs by adding this code of JavaScript:

<script type=”text/javascript”>

$(document).ready(function(){

$(“#tabex a”).click(function(e){

e.preventDefault();

$(this).tab(‘show’);

});

});

</script>

Where tabex is ID of  the<ul>. See example below:

Experience this online

Also see The Bootstrap Table | Bootstrap Form