Get the Bootstrap Environment Ready
First, you need to download the latest version of the bootstrap framework. Then you have to extract it into a folder that you are going to work in. In the "getting started" section of the official bootstrap website it has a basic bootstrap enabled website page template, so you can copy it and create a new webpage. Once you create a new page it will look like this:
Bootstrap Enabled Basic Webpage Template
This template will give you a "hello world" message as an output. Let’s setup the grid environment in order to include other bootstrap components. You can do it as follows;
- After the body tag, you need to wrap all the HTML tags in a div with a class name “container.” This div will keep all the HTML controls in the center of the webpage as well as it is the container bootstrap framework used adjusts to fit into each device size. Add a background shade to show the container space usage.
- Add the basic grid layout. Before you use any bootstrap component, you need to use the grid layout. For this example I’m going to use the following grid structure;
Simple Bootstrap Grid Structure
Now save and refresh the page, you will get following output;
Adding Bootstrap Default Tab Layout
Basic Bootstrap Tab Layout Code
Save the code and refresh you will get an output as follows:
Default Bootstrap Tabs
This is the basic bootstrap tab layout. When you are developing business websites you need to style according to a custom design. Let’s make these tabs stylish by adding custom styles.
Add Border Color to Bootstrap Tabs
Browser Development Tools
Now we are aware that the anchor tag styles need to be changed to get border custom color. You can override any bootstrap CSS class by adding a style tag under the bootstrap CSS link located at the header section. In big development projects, they use separate style sheets to keep custom styles. Let me show you what the styles are that need to get added to get just borders around all the tabs.
Let me explain each style in detail. The first line of style code will give you the blue color line under the tabs. But only in the active tab, it is hidden. How does bootstrap do it? It uses a negative margin for list items, and in each tab, they make the border-bottom transparent.
When you add the second style, you will notice all the rounded tabs got borders including the active tab. According to tab design, we need to make the active tab border bottom transparent. You can do it by adding the third line of code into styles. Once you save and refresh the page you will get an output as follows;
Bootstrap Tabs with custom borders colors
Now we need to style the content area. Before that, we need to add some content to distinguish each tab separately. You can always get sample content using http://www.lipsum.com/ website. Once you add content your code will look as follows:
Bootstrap Tabs with Content
Save the page and refresh the browser. You will get a screen that looks like the one below:
Tabs with Content
Add Border to Bootstrap Content Pane
Now we need to continue the same border to each container. You can do this by adding styles to tab-pane. Let’s add a style class to div with style class “tab-content” call “my-tab.” This new style class will override the default class properties. Now you can add the following line of code to CSS.
Save it and refresh the page you will get an output like below:
As you can see there are two top borders overlapping and again active tab got the bottom border line. We can fix these issues by changing the pane top border property. Above style class can be change as follows;
Save and refresh the page, you will notice an output as follows:
Note before you include content in to each tab pane you need to use the bootstrap grid system otherwise the layout will break.
Add Tab Background Color
Assume you want to assign a background color to top tabs. You can do that using the style classes defined in the header section. For this you need to change the style class “#myTab li a” and assign a background color as follows;
Save and refresh the page, you will get a output like below:
Set Active Tab Color
By default we need to show the active tab using a different color. For that we need to make a little adjustment to style class “#myTab li.active a” as follows:
Above style adjustment will make the active tab background color yellow. Save and refresh the page output will be as follows;
Add Tab Pane Color
Let’s add custom color to the tab pane. You can do it by tweaking custom style class “.my-tab .tab-pane” by adding preferred back ground color as follows;
Save the page and refresh and you will get a page as follows:
Hope you can bear with my color selections for the tab layout. In this article, I have only used only custom colors to demonstrate how you can change the look and feel of the default bootstrap tab layout. But based on your design you can choose colors or even background images to style the tabs. All you need to do is tweak the style classes defined in this article.
This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.
© 2014 wecode
Anastasia on June 22, 2016:
Thank you! Awesome tutorial
Steve on February 08, 2016:
Tab content looks cramped against the edge. How would you suggest adding padding? I tried adding rows and and col classes to the content but then it goes outside of the borders.
@ on December 12, 2015:
Its not working properly with v3.3.5 for some reasons. The active tab color does not change no matter what i try. Do you have someth
Max on October 03, 2015:
Its not working properly with v3.3.5 for some reasons. The active tab color does not change no matter what i try. Do you have something for it?
wecode (author) from Australia on July 09, 2015:
Thanks Paul, for any bootstrap issue happy to help you
Paul on July 05, 2015:
I can't say that I agree with the comment above. I thought this demo was great, and was the only demo I found that showed me how to add borders to Bootstrap Tabs. Thanks for your hard work. It is greatly appreciated.
wecode (author) from Australia on July 25, 2014:
Sorry Alvin for not sharing the live demo. I have updated the article. Here is the working sample of bootstrap tabs
Alvin on July 25, 2014:
No offense but this tutorial sucks hands down. No source, no CSS code that we can look at. Basically we just have to guess our way on how to make edits. Sucks!