How to Style Bootstrap Tabs Step-by-Step

Updated on August 2, 2018

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.

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;

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

Source

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

Source

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

<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

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

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

© 2014 wecode

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Anastasia 

      2 years ago

      Thank you! Awesome tutorial

    • profile image

      Steve 

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

    • profile image

      2 years 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

    • profile image

      Max 

      2 years 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?

    • wecode profile imageAUTHOR

      wecode 

      3 years ago from Australia

      Thanks Paul, for any bootstrap issue happy to help you

    • profile image

      Paul 

      3 years 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 imageAUTHOR

      wecode 

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

    • profile image

      Alvin 

      4 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!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, turbofuture.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://turbofuture.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)