Bootstrap Tabs:

Animating Boostrap Tabs with Color Change Effect

One thing to always keep in mind when designing a website is its appearance. When a person visits your website for the first time, they know nothing about it. the first thing that their eyes see is how your website looks. A pale site without the necessary features can seem extremely unprofessional which might lead to the visitors’ reluctance in using your site. With that said, you need keep this point in mind when designing any section in your website. One of these sections that plays a really important role in your site is the tabs area. You should try your best too add in a little bit of creativity and innovation to make sure it is interesting for your users.

In this post, we have Bootstrap tab code to help you improve the look of your website. Simple tabs are good but why not take things further with out colour change effect CSS tabs code? The code features a proper icon and a particular background colour for each section. The background colour changes in accordance to the section you are reading. For example, when you click on the second icon, the colour changes from whatever it was on to turquoise. You can use this to introduce your website in the about us section or any other part of your site that you like. This HTML tabs code is professionally designed and will improve your website’s overall score when used.

Bootstrap Tab Code

CSS Tabs

HTML Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container about-school text-center">
  <div class="row">
    <h2 class="wow bounceInUp animated lead ">About Us </h2>
    <div id="exTab3" class="container">        
      <ul  class="nav nav-pills inline-display">
        <li class="color-blue col-lg-4">
          <a  href="#1b" data-toggle="tab"><i class="fa fa-book"></i>Tap 1</a>
        </li>
        <li class="color-green col-lg-4">
          <a href="#2b" data-toggle="tab"><i class="fa fa-bus"></i>Tap 2</a>
        </li>
        <li class="color-red col-lg-4">
          <a href="#3b" data-toggle="tab"><i class="fa fa-futbol-o"></i>Tap 3</a>
        </li>
      </ul>
      <div class="tab-content clearfix">
        <div class="tab-pane active" id="1b">
          <h3>Same as example 1 but we have now styled the tab's corner</h3>
        </div>
        <div class="tab-pane" id="2b">
          <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
        </div>
        <div class="tab-pane" id="3b">
          <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
        </div>
      </div>
    </div>
  </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.inline-display{
        display:inline-block!important;
}
#exTab3 .nav-pills > li > a {
    border-radius: 4px;
    font-size: 18px;
}

    #exTab3 .nav-pills > li > a:hover {
        color: #fff;
    }

#exTab3 .tab-content {
    color: white;
    background-color: #428bca;
    padding: 5px 15px;
}

.nav-pills > li + li {
    margin-left: 0px !important;
    margin-bottom: 30px;
}

#exTab3 .nav-pills > li > a > i {
    display: block;
    font-size: 55px;
    margin-bottom: 15px;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

#exTab3 .nav-pills > li > a:hover i {
    -webkit-transform: scale(1.1,1.1) rotate(360deg);
    -moz-transform: scale(1.1,1.1) rotate(360deg);
    -o-transform: scale(1.1,1.1) rotate(360deg);
    transform: scale(1.1,1.1) rotate(360deg);
}

.nav-pills > li.color-blue > a, .nav-pills > li.color-blue > a:hover, .nav-pills > li.color-blue > a:focus {
    background-color: #337ab7 !important;
}

.nav-pills > li.color-green > a, .nav-pills > li.color-green > a:hover, .nav-pills > li.color-green > a:focus {
    background-color: #33b7a3 !important;
}

.color-green a, .color-red a, .color-blue a {
    color: #fff;
}

.nav-pills > li.color-red > a, .nav-pills > li.color-red > a:hover, .nav-pills > li.color-red > a:focus {
    background-color: #b73346 !important;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: inherit;
}

#exTab3 .tab-content {
    background-color: inherit;
}

.tab-pane {
    padding: 5px 15px;
}

    .tab-pane:nth-child(1) {
        background-color: #337ab7 !important;
    }

    .tab-pane:nth-child(2) {
        background-color: #33b7a3 !important;
    }

    .tab-pane:nth-child(3) {
        background-color: #b73346 !important;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.inline-display{
        display:inline-block!important;
}
#exTab3 .nav-pills > li > a {
    border-radius: 4px;
    font-size: 18px;
}

    #exTab3 .nav-pills > li > a:hover {
        color: #fff;
    }

#exTab3 .tab-content {
    color: white;
    background-color: #428bca;
    padding: 5px 15px;
}

.nav-pills > li + li {
    margin-left: 0px !important;
    margin-bottom: 30px;
}

#exTab3 .nav-pills > li > a > i {
    display: block;
    font-size: 55px;
    margin-bottom: 15px;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

#exTab3 .nav-pills > li > a:hover i {
    -webkit-transform: scale(1.1,1.1) rotate(360deg);
    -moz-transform: scale(1.1,1.1) rotate(360deg);
    -o-transform: scale(1.1,1.1) rotate(360deg);
    transform: scale(1.1,1.1) rotate(360deg);
}

.nav-pills > li.color-blue > a, .nav-pills > li.color-blue > a:hover, .nav-pills > li.color-blue > a:focus {
    background-color: #337ab7 !important;
}

.nav-pills > li.color-green > a, .nav-pills > li.color-green > a:hover, .nav-pills > li.color-green > a:focus {
    background-color: #33b7a3 !important;
}

.color-green a, .color-red a, .color-blue a {
    color: #fff;
}

.nav-pills > li.color-red > a, .nav-pills > li.color-red > a:hover, .nav-pills > li.color-red > a:focus {
    background-color: #b73346 !important;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: inherit;
}

#exTab3 .tab-content {
    background-color: inherit;
}

.tab-pane {
    padding: 5px 15px;
}

    .tab-pane:nth-child(1) {
        background-color: #337ab7 !important;
    }

    .tab-pane:nth-child(2) {
        background-color: #33b7a3 !important;
    }

    .tab-pane:nth-child(3) {
        background-color: #b73346 !important;
    }
</style>

</head>
<body>
<div class="container about-school text-center">
  <div class="row">
    <h2 class="wow bounceInUp animated lead ">About Us </h2>
    <div id="exTab3" class="container">        
      <ul  class="nav nav-pills inline-display">
        <li class="color-blue col-lg-4">
          <a  href="#1b" data-toggle="tab"><i class="fa fa-book"></i>Tap 1</a>
        </li>
        <li class="color-green col-lg-4">
          <a href="#2b" data-toggle="tab"><i class="fa fa-bus"></i>Tap 2</a>
        </li>
        <li class="color-red col-lg-4">
          <a href="#3b" data-toggle="tab"><i class="fa fa-futbol-o"></i>Tap 3</a>
        </li>
      </ul>
      <div class="tab-content clearfix">
        <div class="tab-pane active" id="1b">
          <h3>Same as example 1 but we have now styled the tab's corner</h3>
        </div>
        <div class="tab-pane" id="2b">
          <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
        </div>
        <div class="tab-pane" id="3b">
          <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
        </div>
      </div>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars

Feel The Power

Bootstrap Tabs:

Animating Boostrap Tabs with Color Change Effect

Bootstrap Tab Code

CSS Tabs

HTML Tabs