content logo

Bootstrap Tabs:

Bootstrap White Tabs with Red Hover Effect

To make the website more beautiful, we can add details to different items on the website and make them more beautiful with the help of CSS code. In this code we have prepared these details for tabs. We have a simple tab in this code. This tab has a white background. The tabs normally have a white background and the title color is black. In hover mode, the background of the tabs turns red and the title color turns white. In the color selection mode, the title of the tab turns red and a thin red line is placed on top of the tab. All tabs and texts also have borders.

#Simple White Tabs Code #Tabs with Hover Effect #Free Bootstrap Tabs #HTML Tabs Effect #CSS Tabs Effect

<!-- This script got from www.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://www.frontendfreecode.com">Frontend Free Code</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 www.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">Frontend Free Code</a></div>

</body>
</html>
Preview