Bootstrap Tabs:

Black and Purple Bootstrap Tabs with Hover Effect

Most advanced websites have a tab that classifies different types of information into several parts. If you own a website, it is better to use these tabs to attract more people in a shorter time. The Black and Purple Bootstrap Tabs with Hover Effect are presented in this post with functional performance. This Free HTML Tabs Code allows the website’s owner to organize different sorts of data into many parts. The names of these sections are editable, and you can rename them easily. By using this CSS Free Tabs Code, you can mention much information in a small space.

As the following preview represents, this bootstrap has a dark theme, and the background of the detailed part is black. But the writings are white and attract people. The Dark Bootstrap Tabs include three sections, and the unselected parts are purple. As soon as you place the cursor of the mouse or click on a section, it changes to black, and the text appears in a faded way. There are some shaded lines between each part. We have prepared the Bootstrap Tabs Effect to use on all websites and interest the viewers easily and quickly.

Bootstrap Tabs Effect

Free HTML Tabs Code

Dark Bootstrap Tabs

CSS Free Tabs Code

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <div class="tab" role="tabpanel">
                <!-- 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">
                        <h3>Section-1</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section-2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>Section-3</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </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;
}
.tab .nav-tabs {
    border-bottom: 0 none;
    margin-top: 20px;
}
.tab .nav-tabs li a {
    font-size: 14px;
    color: #fff;
    margin-right: 0;
    padding: 10px 45px;
    border-radius: 0;
    overflow: hidden;
    background: #9a5379;
    text-transform: uppercase;
    box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
}
.tab .nav-tabs li:first-child a {
    border-top-left-radius: 8px;
}
.tab .nav-tabs li:last-child a {
    border-top-right-radius: 8px;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a:hover,
.tab .nav-tabs li.active a {
    background: #545f60;
    color: #fff;
    margin-top: -19px;
    padding: 20px 45px;
    border: 1px solid #545f60;
}
.tab .tab-content {
    color: #fff;
    padding: 25px 20px;
    background: #545f60;
    border-radius: 0 0 8px 8px;
    box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 650px) {
    .tab .nav-tabs li {
        width: 100%;
    }
    .tab .nav-tabs li a {
        margin: 0;
        padding: 20px 45px;
        box-shadow: -2px -1px 25px 2px rgba(0, 0, 0, 0.4);
    }
    .tab .nav-tabs li:first-child a,
    .tab .nav-tabs li:last-child a {
        border-radius: 0;
    }
    .tab .nav-tabs li a:hover,
    .tab .nav-tabs li.active a:hover,
    .tab .nav-tabs li.active a {
        margin: 0;
    }
}

<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;
}
.tab .nav-tabs {
    border-bottom: 0 none;
    margin-top: 20px;
}
.tab .nav-tabs li a {
    font-size: 14px;
    color: #fff;
    margin-right: 0;
    padding: 10px 45px;
    border-radius: 0;
    overflow: hidden;
    background: #9a5379;
    text-transform: uppercase;
    box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
}
.tab .nav-tabs li:first-child a {
    border-top-left-radius: 8px;
}
.tab .nav-tabs li:last-child a {
    border-top-right-radius: 8px;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a:hover,
.tab .nav-tabs li.active a {
    background: #545f60;
    color: #fff;
    margin-top: -19px;
    padding: 20px 45px;
    border: 1px solid #545f60;
}
.tab .tab-content {
    color: #fff;
    padding: 25px 20px;
    background: #545f60;
    border-radius: 0 0 8px 8px;
    box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 650px) {
    .tab .nav-tabs li {
        width: 100%;
    }
    .tab .nav-tabs li a {
        margin: 0;
        padding: 20px 45px;
        box-shadow: -2px -1px 25px 2px rgba(0, 0, 0, 0.4);
    }
    .tab .nav-tabs li:first-child a,
    .tab .nav-tabs li:last-child a {
        border-radius: 0;
    }
    .tab .nav-tabs li a:hover,
    .tab .nav-tabs li.active a:hover,
    .tab .nav-tabs li.active a {
        margin: 0;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <div class="tab" role="tabpanel">
                <!-- 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">
                        <h3>Section-1</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section-2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>Section-3</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros
                            iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.
                        </p>
                    </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