Quick Reach
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<title>Tabs example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<!--Main container div starts here -->
<div>
<h1>A Tabs example</h1>
<!-- Nav tabs -->
<ul role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div>
<div class="tab-pane active" id="home">Content for home page here</div>
<div class="tab-pane" id="profile">Profile tab content here</div>
<div class="tab-pane" id="messages">Messages here</div>
<div class="tab-pane" id="settings">Setting tab content</div>
</div>
</div>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<title>Tab example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<!--Main container div starts here -->
<div>
<h1>A Tab example</h1>
<!-- Nav tabs -->
<ul role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div>
<div class="tab-pane fade in active" id="home">Content for home page here</div>
<div class="tab-pane fade" id="profile">Profile tab content here</div>
<div class="tab-pane fade" id="messages">Messages here</div>
<div class="tab-pane fade" id="settings">Setting tab content</div>
</div>
</div>
</body>
</html>
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tab example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabex a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<!--Main container div starts here -->
<div>
<h1>A Tab example</h1>
<!-- Nav tabs -->
<ul id="tabex">
<li class="active"><a href="#home" id="home">Home</a></li>
<li><a href="#profile" >Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<!-- Tab panes -->
<div>
<div class="tab-pane fade in active" id="home">Content for home page here</div>
<div class="tab-pane fade" id="profile">Profile tab content here</div>
<div class="tab-pane fade" id="messages">Messages here</div>
<div class="tab-pane fade" id="settings">Setting tab content</div>
</div>
</div>
</body>
</html>
|
Also see The Bootstrap Table | Bootstrap Form
Leave A Comment?