content logo

Bootstrap Tabs:

CSS Tabs with Purple Hover Effect using Bootstrap

In websites with a dark theme, to bold and make an item stand out, the item can be designed with a color opposite to the color of the website. We also have one of these items in this code. There are tabs with a white background in this code, around each of which there is a border. The background of the texts is also white. Each tab that is selected or the mouse cursor is placed on it has a purple background.

#CSS Tabs Effect #Bootstrap Tabs Effect #Bootstrap Purple Tabs #HTML Tabs Code #HTML Tabs Hover Effect

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <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>
                    <li role="presentation"><a href="#Section4" aria-controls="settings" role="tab" data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h3>section 1</h3>
                        <p>
                            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus ut nibh non eleifend. Etiam non ligula sit amet nunc convallis feugiat sit amet sit amet mauris. Nunc varius vehicula pharetra. Proin
                            sollicitudin imperdiet lorem, nec rutrum lorem posuere ut.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>section 2</h3>
                        <p>
                            2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum turpis vel sapien luctus, nec laoreet felis vehicula. Integer nec justo odio. Sed posuere nec quam ut semper. Vestibulum malesuada
                            ut sem sagittis gravida. Phasellus porta vitae sem ut euismod. Suspendisse potenti. Phasellus et condimentum nibh, nec sodales lorem. Maecenas.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>section 3</h3>
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus ut nibh non eleifend. Etiam non ligula sit amet nunc convallis feugiat sit amet sit amet mauris. Nunc varius vehicula pharetra. Proin
                            sollicitudin imperdiet lorem, nec rutrum lorem posuere ut.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section4">
                        <h3>section 4</h3>
                        <p>
                            4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum turpis vel sapien luctus, nec laoreet felis vehicula. Integer nec justo odio. Sed posuere nec quam ut semper. Vestibulum malesuada
                            ut sem sagittis gravida. Phasellus porta vitae sem ut euismod. Suspendisse potenti. Phasellus et condimentum nibh, nec sodales lorem. Maecenas.
                        </p>
                    </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;
    background: #34495e;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: 1px solid #8e44ad;
    display: inline-block;
    background: #fff;
}
.nav-tabs > li {
    padding: 5px;
    border-right: 1px solid #8e44ad;
}
.nav-tabs > li > a {
    border-radius: 0px;
    margin-right: 0px;
    padding: 15px 30px;
    color: #7a7979;
    font-weight: bold;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child {
    border-right: 0px none;
}
.nav-tabs > li > a:hover {
    background: #8e44ad;
    color: #fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background: #8e44ad;
    color: #fff;
}
.tab-content {
    margin-top: -5px;
    background: #fff;
}
.tab-content > .tab-pane {
    padding: 20px;
    line-height: 22px;
    color: #7a7979;
}
.tab-content > .tab-pane > h3 {
    margin-top: 0;
    text-transform: capitalize;
}
<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;
    background: #34495e;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: 1px solid #8e44ad;
    display: inline-block;
    background: #fff;
}
.nav-tabs > li {
    padding: 5px;
    border-right: 1px solid #8e44ad;
}
.nav-tabs > li > a {
    border-radius: 0px;
    margin-right: 0px;
    padding: 15px 30px;
    color: #7a7979;
    font-weight: bold;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child {
    border-right: 0px none;
}
.nav-tabs > li > a:hover {
    background: #8e44ad;
    color: #fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background: #8e44ad;
    color: #fff;
}
.tab-content {
    margin-top: -5px;
    background: #fff;
}
.tab-content > .tab-pane {
    padding: 20px;
    line-height: 22px;
    color: #7a7979;
}
.tab-content > .tab-pane > h3 {
    margin-top: 0;
    text-transform: capitalize;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <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>
                    <li role="presentation"><a href="#Section4" aria-controls="settings" role="tab" data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h3>section 1</h3>
                        <p>
                            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus ut nibh non eleifend. Etiam non ligula sit amet nunc convallis feugiat sit amet sit amet mauris. Nunc varius vehicula pharetra. Proin
                            sollicitudin imperdiet lorem, nec rutrum lorem posuere ut.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>section 2</h3>
                        <p>
                            2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum turpis vel sapien luctus, nec laoreet felis vehicula. Integer nec justo odio. Sed posuere nec quam ut semper. Vestibulum malesuada
                            ut sem sagittis gravida. Phasellus porta vitae sem ut euismod. Suspendisse potenti. Phasellus et condimentum nibh, nec sodales lorem. Maecenas.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>section 3</h3>
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rhoncus ut nibh non eleifend. Etiam non ligula sit amet nunc convallis feugiat sit amet sit amet mauris. Nunc varius vehicula pharetra. Proin
                            sollicitudin imperdiet lorem, nec rutrum lorem posuere ut.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section4">
                        <h3>section 4</h3>
                        <p>
                            4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum turpis vel sapien luctus, nec laoreet felis vehicula. Integer nec justo odio. Sed posuere nec quam ut semper. Vestibulum malesuada
                            ut sem sagittis gravida. Phasellus porta vitae sem ut euismod. Suspendisse potenti. Phasellus et condimentum nibh, nec sodales lorem. Maecenas.
                        </p>
                    </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