Bootstrap Tabs:

Bootstrap White Tabs with Red Hover Effect

Most people like simplicity and attract to simple websites. So, if you have a website and want to increase your visitors, look at this post carefully and use the mentioned code. The Bootstrap White Tabs with Red Hover Effect are presented in this post with functional performance. This Simple White Tabs Code is so unique and makes your website beautiful and simple. Using these Free Bootstrap Tabs allows you to categorize the content of your website and save many physical spaces. The following preview shows three sections in the HTML Tabs Effect.

The background of all sections is simply white. The detailed part has the same situation, too. This preview shows a light border around the text, and three sections are separated with some lines. If you put your mouse on a specific section in these CSS Tabs Effect, the background changes to red, and the writing turns white. At the same time, once you click on that part and select it, the background changes to white with a slight effect. Then you can see a red line at the top of the selected section. These Tabs with Hover Effect are available through the link below, and you can apply them on your website.

Simple White Tabs Code

Tabs with Hover Effect

Free Bootstrap Tabs

HTML Tabs Effect

CSS Tabs Effect

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div>
                <!-- 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">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        1-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper id neque non egestas. Curabitur dapibus interdum mi, in faucibus neque elementum sed. Vivamus rutrum tristique libero ac aliquam.
                        Nam vitae velit non libero sodales posuere ut vel quam. Proin.
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        2-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dapibus ante. In hac habitasse platea dictumst. Aenean nulla dui, viverra quis lobortis at, aliquet vitae dolor. Cras ut nisl lorem. Aenean a sodales
                        turpis, ac semper quam. In a massa purus. Phasellus efficitur nec purus sed tincidunt. Vestibulum ante.
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        3-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl dapibus, dignissim purus id, dapibus justo. Duis a ante a erat porta vehicula sed a tortor. Vestibulum ante ipsum primis in faucibus orci
                        luctus et ultrices posuere cubilia Curae; Vestibulum mauris lorem, sodales sit amet magna vel, euismod pulvinar nunc. Sed porttitor efficitur est at sodales. Quisque in lorem.
                    </div>
                </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: 1px solid #e4e4e4;
}
.nav-tabs > li > a {
    border-radius: 0px;
    border: 1px solid #e4e4e4;
    border-right: 0px none;
    margin-right: 0px;
    padding: 8px 17px;
    color: #222222;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child {
    border-right: 1px solid #e4e4e4;
}
.nav-tabs > li > a {
    padding: 15px 20px;
}
.nav-tabs > li > a:hover {
    border: 1px solid #ea5e50;
    border-right: 0px none;
    background: #ea5e50;
    color: #fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-top: 1px solid #ea5e50;
    border-right: 0px none;
    color: #ea5e50;
}
.tab-content > .tab-pane {
    border: 1px solid #e4e4e4;
    border-top: 0px none;
    padding: 20px;
    line-height: 22px;
    color: #7e828a;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.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">
<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: 1px solid #e4e4e4;
}
.nav-tabs > li > a {
    border-radius: 0px;
    border: 1px solid #e4e4e4;
    border-right: 0px none;
    margin-right: 0px;
    padding: 8px 17px;
    color: #222222;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child {
    border-right: 1px solid #e4e4e4;
}
.nav-tabs > li > a {
    padding: 15px 20px;
}
.nav-tabs > li > a:hover {
    border: 1px solid #ea5e50;
    border-right: 0px none;
    background: #ea5e50;
    color: #fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-top: 1px solid #ea5e50;
    border-right: 0px none;
    color: #ea5e50;
}
.tab-content > .tab-pane {
    border: 1px solid #e4e4e4;
    border-top: 0px none;
    padding: 20px;
    line-height: 22px;
    color: #7e828a;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div>
                <!-- 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">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        1-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper id neque non egestas. Curabitur dapibus interdum mi, in faucibus neque elementum sed. Vivamus rutrum tristique libero ac aliquam.
                        Nam vitae velit non libero sodales posuere ut vel quam. Proin.
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        2-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dapibus ante. In hac habitasse platea dictumst. Aenean nulla dui, viverra quis lobortis at, aliquet vitae dolor. Cras ut nisl lorem. Aenean a sodales
                        turpis, ac semper quam. In a massa purus. Phasellus efficitur nec purus sed tincidunt. Vestibulum ante.
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        3-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl dapibus, dignissim purus id, dapibus justo. Duis a ante a erat porta vehicula sed a tortor. Vestibulum ante ipsum primis in faucibus orci
                        luctus et ultrices posuere cubilia Curae; Vestibulum mauris lorem, sodales sit amet magna vel, euismod pulvinar nunc. Sed porttitor efficitur est at sodales. Quisque in lorem.
                    </div>
                </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