Bootstrap Tabs:

Bootstrap Simple Tabs with Green Top Border

Tabs have a significant impact on the design of any website. If you have a website and want to find a beautiful tab to attract more people, look at this post carefully. The Bootstrap Simple Tabs with Green Top Border is presented here with excellent performance. These Bootstrap Simple Tabs let you sort the information and data into different sections. By looking at this bootstrap, you understand the simplicity and beauty of the mentioned code, and you can use it on your website.

This bootstrap has a beautiful and unique design, and it is totally simple. As you can see here, these Rectangle Tabs have a white background, and the title of the sections is black. Plus, the writings of the detailed part are gray. There is a border all around these tabs. As you place the cursor of the mouse or click on a specific part, a green border appears at the top of the section. These Bootstrap Tabs Top Border remark the selected parts. Using these Tabs with Green Line is so helpful for any website. You can download this bootstrap from the link below and use it on your website to make it organized.

Bootstrap Simple Tabs

Tabs with Green Line

Rectangle Tabs

Bootstrap Tabs Top Border

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <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>
                    <li role="presentation"><a href="#Section4" aria-controls="messages" role="tab" data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section4">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </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;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}
.tab .nav-tabs {
    border-bottom-color: #f0f0f0;
}
.tab .nav-tabs li {
    margin-bottom: 0;
}
.tab .nav-tabs li a {
    font-size: 14px;
    color: #222;
    background: #fff;
    border-radius: 0;
    padding: 15px;
    margin-right: 0;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li:last-child a,
.tab .nav-tabs li:last-child.active a {
    border-right: 1px solid #f0f0f0 !important;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    border: none;
    border-left: 1px solid #f0f0f0;
    color: #666;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:before {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 4px solid #0091a0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:hover:before {
    top: -3px;
    opacity: 1;
}
.tab .nav-tabs li a:hover:before {
    top: -4px;
    opacity: 1;
}
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 45%;
    border: 7px solid transparent;
    border-top: 7px solid #0091a0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:hover:after {
    top: -1px;
    opacity: 1;
}
.tab .tab-content {
    font-size: 14px;
    color: #999;
    line-height: 25px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-top: none;
}

<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 {
    outline: none;
    text-decoration: none;
}
.tab .nav-tabs {
    border-bottom-color: #f0f0f0;
}
.tab .nav-tabs li {
    margin-bottom: 0;
}
.tab .nav-tabs li a {
    font-size: 14px;
    color: #222;
    background: #fff;
    border-radius: 0;
    padding: 15px;
    margin-right: 0;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    text-transform: uppercase;
    position: relative;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li:last-child a,
.tab .nav-tabs li:last-child.active a {
    border-right: 1px solid #f0f0f0 !important;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    border: none;
    border-left: 1px solid #f0f0f0;
    color: #666;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:before {
    content: "";
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 4px solid #0091a0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:hover:before {
    top: -3px;
    opacity: 1;
}
.tab .nav-tabs li a:hover:before {
    top: -4px;
    opacity: 1;
}
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 45%;
    border: 7px solid transparent;
    border-top: 7px solid #0091a0;
    opacity: 0;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li.active a:after,
.tab .nav-tabs li a:hover:after {
    top: -1px;
    opacity: 1;
}
.tab .tab-content {
    font-size: 14px;
    color: #999;
    line-height: 25px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-top: none;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <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>
                    <li role="presentation"><a href="#Section4" aria-controls="messages" role="tab" data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section4">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis molestie lacus. In vestibulum lacinia lorem quis convallis. Sed vitae neque semper, sagittis turpis ac, fermentum arcu. Nulla tempor
                            vestibulum nisi sit amet fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id viverra.
                        </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