content logo

Bootstrap Tabs:

Tabs with Pink and Black Header Using Bootstrap

To beautify your website, you can use CSS codes with Bootstrap. In this code, we have created a beautiful appearance for tabs using CSS and Bootstrap. Tabs and texts have a border. The tabs have a black background and the title of the tabs is white. The background color of the tabs is pink in the selected mode or hover. The appearance of tabs when selected is like a dialog box.

#Simple Tabs Code #Bootstrap Free Tabs Code #Tabs with Color Effcet #HTML Pink Tabs #Bootstrap Tabs Header

<!-- 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 active" id="Section1">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                        id est laborum
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section2">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section3">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </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 {
    position: relative;
}
.nav-tabs > li:hover:after,
.nav-tabs .active:after {
    content: "";
    border-top: 10px solid #dc005a;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    position: absolute;
    top: 41px;
    right: 38%;
}
.nav-tabs > li > a {
    border-radius: 0px;
    background: #272d33;
    padding: 10px 20px;
    color: #fff;
}
.nav-tabs > li > a:hover {
    border-color: transparent;
    background: #dc005a;
    transition: 0.3s ease;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background: #dc005a;
    color: #fff;
}
.tab-content > .tab-pane {
    border: 1px solid #c4c4c4;
    border-top: 0px none;
    padding: 20px;
    line-height: 22px;
}
@media only screen and (max-width: 360px) {
    .nav-tabs > li > a {
        padding: 10px;
    }
}
<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 {
    position: relative;
}
.nav-tabs > li:hover:after,
.nav-tabs .active:after {
    content: "";
    border-top: 10px solid #dc005a;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    position: absolute;
    top: 41px;
    right: 38%;
}
.nav-tabs > li > a {
    border-radius: 0px;
    background: #272d33;
    padding: 10px 20px;
    color: #fff;
}
.nav-tabs > li > a:hover {
    border-color: transparent;
    background: #dc005a;
    transition: 0.3s ease;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background: #dc005a;
    color: #fff;
}
.tab-content > .tab-pane {
    border: 1px solid #c4c4c4;
    border-top: 0px none;
    padding: 20px;
    line-height: 22px;
}
@media only screen and (max-width: 360px) {
    .nav-tabs > li > a {
        padding: 10px;
    }
}
</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 active" id="Section1">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                        id est laborum
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section2">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section3">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    </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