Bootstrap Tabs:

Colorful Tabs with Icons using Bootstrap

If you want to shine among all emulators and attract more audiences to your website, look at this post and use the below code. This code shows the Colorful Tabs with Icons Using Bootstrap with an attractive design. This amazing bootstrap increases the number of your visitors. In addition to their beauty, these Free Bootstrap Tabs help the website’s owner regularize all data and information and classify them into some specific sections. These HTML Tabs with Icons have a significant impact on the appearance of your website in a short time.

By looking at this preview, you can understand that this bootstrap includes three sections. Each of these Free Simple Tabs has a particular color. Plus, you see different icons at the top of each title. The color of these items is white. The first tab is dark blue, the second is orange, and the last is pink. If you put the mouse on each part, it becomes bold, and you can see a shadow around it. As you click on this section, the background of the detailed part changes to its specific tab color. The writings of the text in these Bootstrap Colorful Tabs are also white.

Free Bootstrap Tabs

HTML Tabs with Icons

Free Simple Tabs

Bootstrap Colorful Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab" class="blue"><i class="fa fa-envelope-o"></i>Section 1</a>
                </li>
                <li role="presentation">
                    <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" class="orange"><i class="fa fa-cube"></i>Section 2</a>
                </li>
                <li role="presentation">
                    <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" class="pink"><i class="fa fa-comment"></i>Section 3</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active blue" id="Section1">
                    <h4>Section 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                        malesuada ipsum. Nam commodo, est nec dictum bibendum.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade orange" id="Section2">
                    <h4>Section 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                        malesuada ipsum. Nam commodo, est nec dictum bibendum.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade pink" id="Section3">
                    <h4>Section 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                        malesuada ipsum. Nam commodo, est nec dictum bibendum.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    margin: 20px;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: none;
    margin-bottom: 15px;
}
.nav-tabs > li {
    border-bottom: none;
    margin-right: 10px;
}
.nav-tabs li .blue,
.nav-tabs li .orange,
.nav-tabs li .pink {
    padding: 10px 22px;
    border-radius: 0;
    color: #fff;
}
.nav-tabs li a > i,
.nav-tabs li a > i,
.nav-tabs li a > i {
    text-align: center;
    display: block;
    font-size: 25px;
    margin-bottom: 10px;
}
.nav-tabs li .blue {
    background: #727cb6;
    transition: all 0.3s ease 0s;
}
.nav-tabs li .blue:hover {
    background: #727cb6;
    box-shadow: 0 0 8px #727cb6;
    border: 1px solid #727cb6;
}
.nav-tabs li.active .blue,
.nav-tabs li.active .blue:hover,
.nav-tabs li.active .blue:focus {
    background: #727cb6;
    color: #fff;
    border: 1px solid #727cb6;
}
.nav-tabs li .orange {
    background: #e67e22;
    transition: all 0.3s ease 0s;
}
.nav-tabs li .orange:hover {
    background: #e67e22;
    box-shadow: 0 0 8px #e67e22;
    border: 1px solid #e67e22;
}
.nav-tabs li.active .orange,
.nav-tabs li.active .orange:hover,
.nav-tabs li.active .orange:focus {
    background: #e67e22;
    color: #fff;
    border: 1px solid #e67e22;
}
.nav-tabs li .pink {
    background: #ed687c;
    transition: all 0.3s ease 0s;
}
.nav-tabs li .pink:hover {
    background: #ed687c;
    box-shadow: 0 0 8px #ed687c;
    border: 1px solid #ed687c;
}
.nav-tabs li.active .pink,
.nav-tabs li.active .pink:hover,
.nav-tabs li.active .pink:focus {
    background: #ed687c;
    color: #fff;
    border: 1px solid #ed687c;
}
.tab-content .blue {
    background: #727cb6;
    padding: 15px;
}
.tab-content .orange {
    background: #e67e22;
    padding: 15px;
}
.tab-content .pink {
    background: #ed687c;
    padding: 15px;
}
.tab-content h4 {
    font-weight: 600;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    color: #fff;
}
.tab-content p {
    color: #fff;
    margin: 0 0 10px;
}
@media only screen and (max-width: 480px) {
    .nav-tabs > li {
        width: 100%;
        text-align: center;
        margin-bottom: 1px;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
    margin: 20px;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: none;
    margin-bottom: 15px;
}
.nav-tabs > li {
    border-bottom: none;
    margin-right: 10px;
}
.nav-tabs li .blue,
.nav-tabs li .orange,
.nav-tabs li .pink {
    padding: 10px 22px;
    border-radius: 0;
    color: #fff;
}
.nav-tabs li a > i,
.nav-tabs li a > i,
.nav-tabs li a > i {
    text-align: center;
    display: block;
    font-size: 25px;
    margin-bottom: 10px;
}
.nav-tabs li .blue {
    background: #727cb6;
    transition: all 0.3s ease 0s;
}
.nav-tabs li .blue:hover {
    background: #727cb6;
    box-shadow: 0 0 8px #727cb6;
    border: 1px solid #727cb6;
}
.nav-tabs li.active .blue,
.nav-tabs li.active .blue:hover,
.nav-tabs li.active .blue:focus {
    background: #727cb6;
    color: #fff;
    border: 1px solid #727cb6;
}
.nav-tabs li .orange {
    background: #e67e22;
    transition: all 0.3s ease 0s;
}
.nav-tabs li .orange:hover {
    background: #e67e22;
    box-shadow: 0 0 8px #e67e22;
    border: 1px solid #e67e22;
}
.nav-tabs li.active .orange,
.nav-tabs li.active .orange:hover,
.nav-tabs li.active .orange:focus {
    background: #e67e22;
    color: #fff;
    border: 1px solid #e67e22;
}
.nav-tabs li .pink {
    background: #ed687c;
    transition: all 0.3s ease 0s;
}
.nav-tabs li .pink:hover {
    background: #ed687c;
    box-shadow: 0 0 8px #ed687c;
    border: 1px solid #ed687c;
}
.nav-tabs li.active .pink,
.nav-tabs li.active .pink:hover,
.nav-tabs li.active .pink:focus {
    background: #ed687c;
    color: #fff;
    border: 1px solid #ed687c;
}
.tab-content .blue {
    background: #727cb6;
    padding: 15px;
}
.tab-content .orange {
    background: #e67e22;
    padding: 15px;
}
.tab-content .pink {
    background: #ed687c;
    padding: 15px;
}
.tab-content h4 {
    font-weight: 600;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    color: #fff;
}
.tab-content p {
    color: #fff;
    margin: 0 0 10px;
}
@media only screen and (max-width: 480px) {
    .nav-tabs > li {
        width: 100%;
        text-align: center;
        margin-bottom: 1px;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab" class="blue"><i class="fa fa-envelope-o"></i>Section 1</a>
                </li>
                <li role="presentation">
                    <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" class="orange"><i class="fa fa-cube"></i>Section 2</a>
                </li>
                <li role="presentation">
                    <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" class="pink"><i class="fa fa-comment"></i>Section 3</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active blue" id="Section1">
                    <h4>Section 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                        malesuada ipsum. Nam commodo, est nec dictum bibendum.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade orange" id="Section2">
                    <h4>Section 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                        malesuada ipsum. Nam commodo, est nec dictum bibendum.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade pink" id="Section3">
                    <h4>Section 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                        malesuada ipsum. Nam commodo, est nec dictum bibendum.
                    </p>
                </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