Animating Boostrap Tabs with Color Change Effect

Bootstrap Tabs: Animating Boostrap Tabs with Color Change Effect

In the following code, we have a set of tabs, each of which has an icon and a background color, and in icon, each icon rotates. When we click on each tab, the text that is displayed has a background similar to the background color of its icon, and thus a beautiful order is executed. This CSS code is pure and is very suitable for situations where we want the site to be light.

#Bootstrap Tab Code # CSS Tabs # HTML Tabs

<!-- this script got from www.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://www.frontendfreecode.com">Frontend Code</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 www.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" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>

Preview

RECENT CODES

Bootstrap Table with Sorting Animation

Bootstrap Table with Col and Row Effect on Hover

Bootstrap Table with Fixed Header

Bootstrap Collapsing / Expanding Table

Bootstrap Pricing Table with Fade Effect

Bootstrap Header with Hover Effect

Bootstrap Dynamic Header with Style Change

Bootstrap Header with Material Effect for Tabs

Animating Bootstrap 4 Navbar

Vertical Bootstrap Header with Animation

Feel The Power

Bootstrap Tabs: Animating Boostrap Tabs with Color Change Effect

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo