Bootstrap Tabs With 6 Online Examples
The Bootstrap Tab Plug-in
Bootstrap has a built-in JavaScript plug-in that enables you creating tabs in web pages quite easily. It is the matter of including a few CSS classes and initiating tabs by data attributes or JavaScript.
A Short Video of this Tutorial
In the tutorial, I will show you creating Bootstrap tabs with default color scheme as well as using customized CSS to let you match tab and its content according to your web site’s design.
Let me start with a simple example of Tabs in Bootstrap.
A simple tabs example with default CSS
For the basic demo, I have created tabs by using the unordered list <ul> tag of HTML with built-in Bootstrap classes.
Five tabs are created while each tab is created by using the <li> inside that <ul> tag. See the demo online and steps to create this below:
See online demo and code
First of all, two libraries are included in the head section of demo page.
One is Bootstrap JS library. You also need to include jQuery library. I have used the CDNs for both.
You also need to include the Bootstrap CSS file in the <head> section that contains the classes related to tabs as well as other components.
In the markup section, a <ul> tag is used to create tabs:
|
1 |
<ul class="nav nav-tabs" role="tablist"> |
The <ul> is assigned the nav and nav-tab classes, that are built-in.
After that, tabs are created by using the <li> tags. For the demo, I created five tabs. You may add or remove as per requirement:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<li class="active"><a href="#hometab" role="tab" data-toggle="tab">Home</a></li> <li><a href="#javatab" role="tab" data-toggle="tab">Java</a></li> <li><a href="#csharptab" role="tab" data-toggle="tab">C#</a></li> <li><a href="#mysqltab" role="tab" data-toggle="tab">MySQL</a></li> <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li> </ul> </li> |
Use the .active class in a <li> tag that you want to open as the web pages loads. I used it in the Home tab. Each tag is activated by using the data-toggle=”tab” in each <li> element, that represents a tab.
Each <li> is also given an id which is used in the content / tab-pane of each tab.
The final step is to create the content of each tab in the tab panes. A div is created with tab-content class:
<div class=”tab-content”>
Inside that <div>, five more div elements are used to create tab panes for each tab that are associated by ids. For example:
<div class=”tab-pane active” id=”hometab”>Write something for home tab</div>
It represents the “Home” tab and so on. You ca also use other HTML elements like <p> tag rather <div> for tab content.
You can see the complete code in the demo page’s code section.
Customized Bootstrap Tabs demo
In this example, I will show you how to change the default look of Tabs of bootstrap by using CSS classes.
First have a look at the online demo, which is followed by a little description:
See online demo and code
Basically, I have overridden the default classes of Bootstrap CSS to custom properties. For example, the nav-tabs class is used to change the background color of the main container of tabs.
nav-tabs > li.active > a defines the active tab and so on. Following is the CSS used for this custom Tab Bootstrap:
|
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 |
<style> .nav-tabs{ background-color:#C8D3DB; } .nav-tabs > li > a{ border-radius: 5px; } .nav-tabs > li > a:hover{ background-color: #3D515F !important; border-radius: 5px; color:#fff; border:1px solid black; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ background-color: #68889E !important; color:#fff; border:2px solid #3F515F; } </style> |
To make this style work, you have to place this style after referring the Bootstrap CSS. If you are using an external CSS file for your website and included that file above the Bootstrap CSS then changes will not work.
Customizing the content area of Tabs
In above example, only tabs CSS is customized. In pro websites, you may need to change the content area as well where Tabs information is displayed. For example, adding a border or background color etc.
The following demo shows how you can do this:
See online demo and code
This demo is using the same number of tabs as in above example. However, the content area or tab pane is also customized with CSS properties.
The tab panes are using tab-pane class which properties are changed in the <head> section in <style> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.tab-pane { border:solid 1px #1A3E5E; border-top: 0; width:60%; background-color:#D6E6F3; padding:5px; } |
Apart from that, I used different color scheme for the tabs which also overridden the default classes:
|
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 |
.nav-tabs { border-color:#1A3E5E; width:60%; } .nav-tabs > li a { border: 1px solid #1A3E5E; background-color:#2F71AB; color:#fff; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ background-color:#D6E6F3; color:#000; border: 1px solid #1A3E5E; border-bottom-color: transparent; } .nav-tabs > li > a:hover{ background-color: #D6E6F3 !important; border-radius: 5px; color:#000; } |
You may adjust the width accordingly. Also, the border-bottom property of the active tab is kept transparent to merge it with the tab’s content background color.
For the demonstration, I also used <li> tags inside the “Java” tab that means you can use the different type of content in the Bootstrap tabs.
Adding the fading effect in the Tabs
The following example is a replica of the above demo, except I added the fade in class to the active tab and fade to the other tab-panes.
You can see the fading effect as you click from one tab to another.
See the demo of fading tabs online:
See online demo and code
Another style of tabs in Bootstrap with custom CSS
The following demo of tabs is styled differently by using custom CSS along with Bootstrap classes. You may add the fading effect or display without any effect as a user switches from one tab to the other. Have a look at the code and output:
See online demo and code
To see another style and how to customize CSS for this tabs style, visit this tabs tutorial.
You may also add dropdowns in Bootstrap tabs that display its own content. This may be useful for situations where you have sub-section for the main tab or web page space constraints. For adding a dropdown in tabs, you just need to include the dropdown related classes.
Have a look at this demo first along with code:
See online demo and code
I have written a detailed guide for adding the dropdown in tabs: Adding dropdowns in tabs of Bootstrap.