Updated date:

How to Style Bootstrap Tabs Step-by-Step

Author:

Bootstrap is a powerful front-end development framework, and it is very easy to build responsive websites using it. Bootstrap's official website offers lots of common CSS/HTML components and Javascript components that are ready to use. In this article, I’m going to show you how to use the bootstrap javascript tab component to build a stylish tab layout for your website.

apply-custom-styles-to-bootastrap-tabs-step-by-step

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

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;

  1. 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.
  2. 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

<div class="container" style=”background-color:#eee;”>
        <div class="row">
            <div class="col-md-8">
                <h1>
                    Bootstrap Tabs!</h1>
            </div>
        </div>
    </div>

Now save and refresh the page, you will get following output;

apply-custom-styles-to-bootastrap-tabs-step-by-step

Adding Bootstrap Default Tab Layout

The gray area on the screen is the container area and as you can see it is centered. Now you add the basic bootstrap tab component. You can get sample code for bootstrap tabs in the javascript component section under tabs. After adding the tab code web page will look as follows:

Basic Bootstrap Tab Layout Code

<div class="container" style="background-color: #eee;">
        <div class="row">
            <div class="col-md-8">
                <h1>
                    Bootstrap Tabs!</h1>
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                    <li><a href="#profile" data-toggle="tab">Profile</a></li>
                    <li><a href="#messages" data-toggle="tab">Messages</a></li>
                    <li><a href="#settings" data-toggle="tab">Settings</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="home">
                        ...</div>
                    <div class="tab-pane" id="profile">
                        ...</div>
                    <div class="tab-pane" id="messages">
                        ...</div>
                    <div class="tab-pane" id="settings">
                        ...</div>
                </div>
            </div>
        </div>
    </div>

Save the code and refresh you will get an output as follows:

Default Bootstrap Tabs

apply-custom-styles-to-bootastrap-tabs-step-by-step

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

Before proceeding any further, you need to locate the default styles of bootstrap. You can do this using any browser. All the browsers are equipped with development tools, where it will let you examine each HTML tag and their styles, debug javascript, and many more. I’m using chrome browser, and by pressing F12 I can get the development tools. You will get two new windows at the bottom; one shows the HTML source and the other shows all the CSS code inherited. Click on search next to element and hover on the element you wish to find details. It will show up on the CSS window. The development window will look as follows:

Browser Development Tools

apply-custom-styles-to-bootastrap-tabs-step-by-step

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

apply-custom-styles-to-bootastrap-tabs-step-by-step

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

<div class="container">
        <div class="row">
            <div class="col-md-8">
                <h1>
                    Bootstrap Tabs!</h1>
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                    <li><a href="#profile" data-toggle="tab">Profile</a></li>
                    <li><a href="#messages" data-toggle="tab">Messages</a></li>
                    <li><a href="#settings" data-toggle="tab">Settings</a></li>
                </ul>
                <div class="tab-content my-tab">
                    <div class="tab-pane active" id="home">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    Tab One</h3>
                                <p>
                                    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                                    the industry's standard dummy text ever since the 1500s, when an unknown printer
                                    took a galley of type and scrambled it to make a type specimen book.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="profile">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    Tab Two</h3>
                                <p>
                                    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                                    the industry's standard dummy text ever since the 1500s, when an unknown printer
                                    took a galley of type and scrambled it to make a type specimen book.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="messages">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    Tab Three</h3>
                                <p>
                                    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                                    the industry's standard dummy text ever since the 1500s, when an unknown printer
                                    took a galley of type and scrambled it to make a type specimen book.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="settings">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    Tab Four</h3>
                                <p>
                                    is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                                    the industry's standard dummy text ever since the 1500s, when an unknown printer
                                    took a galley of type and scrambled it to make a type specimen book.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Save the page and refresh the browser. You will get a screen that looks like the one below:

Tabs with Content

apply-custom-styles-to-bootastrap-tabs-step-by-step

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.

.my-tab .tab-pane{border:solid 1px blue;}

Save it and refresh the page you will get an output like below:

apply-custom-styles-to-bootastrap-tabs-step-by-step

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;

.my-tab .tab-pane{ border:solid 1px blue;  border-top: 0;    }

Save and refresh the page, you will notice an output as follows:

apply-custom-styles-to-bootastrap-tabs-step-by-step

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;

#myTab li a { border-color: blue;background-color:#A5C967; }

Save and refresh the page, you will get a output like below:

apply-custom-styles-to-bootastrap-tabs-step-by-step

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:

#myTab li.active a {border-bottom-color: transparent;background-color:Yellow; }

Above style adjustment will make the active tab background color yellow. Save and refresh the page output will be as follows;

apply-custom-styles-to-bootastrap-tabs-step-by-step

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;

.my-tab .tab-pane{ border:solid 1px blue;  border-top: 0; background-color:#F7EFC6;}

Save the page and refresh and you will get a page as follows:

apply-custom-styles-to-bootastrap-tabs-step-by-step

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

Comments

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

http://wecodeyoursite.com/samples/bootstrap3/boots...

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!