Cell PhonesComputersConsumer ElectronicsGraphic Design & Video EditingHome Theater & AudioIndustrial TechnologyInternet

How to Style Bootastrap Tabs Step-by-Step

Updated on July 16, 2016

Joined: 6 years agoFollowers: 7Articles: 13

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

If useful rate this

Cast your vote for How to style bootstrap Tabs

Get bootstrap environment ready

First you need to download bootstrap framework latest version. Extract it into a folder that you are going to work. In the getting started section of the bootstrap official website has basic bootstrap enabled website page template, you can copy it and create new webpage. Once you create a new page it would look as follows;

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 hello world message as 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 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. Let me add a background shade to show 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;

Adding bootstrap default tab layout

The gray area on the screen is the container area and as you can see it is centered. Now all set lets 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

Source

This is the basic bootstrap tab layout. When you are developing business websites 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 there styles, debug javascript and many more. I’m using chrome browser, by pressing F12 you can get development tools. You will get two new windows at the bottom, one shows 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 on the css window. The development window will look like as follows;

Browser Development Tools

Source

Now we are aware 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 are the styles need to add into 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 bootstrap does it? It uses negative margin for list item 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 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. Always you can 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 looks like 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.

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

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;

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

Save and refresh the page, you can 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;

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

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;

#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;

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 will get a page as follows;

Hope you 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 would be tweak the style classes defined in this article.

You can look at the live demo of bootstrap tabs here

© 2014 wecode

Comments

    0 of 8192 characters used
    Post Comment

    • Alvin 2 years ago

      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!

    • wecode profile image
      Author

      wecode 2 years ago from Australia

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

    • Paul 18 months ago

      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 profile image
      Author

      wecode 18 months ago from Australia

      Thanks Paul, for any bootstrap issue happy to help you

    • Max 15 months ago

      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?

    • 13 months ago

      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

    • Steve 11 months ago

      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.

    • Anastasia 7 months ago

      Thank you! Awesome tutorial

    Click to Rate This Article