content logo

Bootstrap Tabs:

Green Rectangle Tabs with Bootstrap

Green Rectangle Tabs with Bootstrap is one of the best and the most beautiful bootstrap that you have ever seen. As the name is obvious, the shape of this bootstrap is a rectangle with a nice background. So, if you like this shape and appearance for your website, you can easily download and use this code below. These Bootstrap Rectangle Tabs are designed so attractive with a color between green and blue. This code helps you to classify the information of your website into some little parts. This categorization of Bootstrap Green Tabs is an ideal way to organize your website.

At first that you did not click on a part, it has a white background and the writing is green. But after clicking on a specific part, the background nicely turns to green and the writing will be white. This effect appears in a hover mode that attracts people’s attention. These Tabs with Hover Effect have a white border that makes the tabs more beautiful. After clicking on a part, the detail of each section will appear in a faded way. Using these Animating Green Tabs is an awesome idea which you can use for your website and attract more visitors.

#

Bootstrap Rectangle Tabs

#

Bootstrap Green Tabs

#

Tabs with Hover Effect

#

Animating Green Tabs

<!-- 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>
                </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. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </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 {
    text-decoration: none;
    outline: none;
}
.tab {
    font-family: "Nunito", sans-serif;
}
.tab .nav-tabs {
    border: none;
}
.tab .nav-tabs li a {
    color: #08ad9c;
    background-color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 20px 8px;
    margin: 0 5px 10px 0;
    border: 5px solid #fff;
    border-radius: 0;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.15) inset;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a:hover {
    color: #fff;
    background-color: #fff;
    border: 5px solid #fff;
}
.tab .nav-tabs li a:before {
    content: "";
    background-color: #08ad9c;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: rotate(20deg);
    position: absolute;
    top: 150%;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0.13s, top 0.5s ease 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before {
    opacity: 1;
    transform: rotate(0);
    top: 0;
}
.tab .tab-content {
    color: #fff;
    background-color: #08ad9c;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 30px;
    padding: 20px;
    border: 10px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.15) inset;
    position: relative;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
        margin: 0 0 5px;
    }
}
<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 {
    text-decoration: none;
    outline: none;
}
.tab {
    font-family: "Nunito", sans-serif;
}
.tab .nav-tabs {
    border: none;
}
.tab .nav-tabs li a {
    color: #08ad9c;
    background-color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 20px 8px;
    margin: 0 5px 10px 0;
    border: 5px solid #fff;
    border-radius: 0;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.15) inset;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a:hover {
    color: #fff;
    background-color: #fff;
    border: 5px solid #fff;
}
.tab .nav-tabs li a:before {
    content: "";
    background-color: #08ad9c;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: rotate(20deg);
    position: absolute;
    top: 150%;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s ease 0s, transform 0.3s ease 0.13s, top 0.5s ease 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before {
    opacity: 1;
    transform: rotate(0);
    top: 0;
}
.tab .tab-content {
    color: #fff;
    background-color: #08ad9c;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 30px;
    padding: 20px;
    border: 10px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 0, 0, 0.15) inset;
    position: relative;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
        margin: 0 0 5px;
    }
}
</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>
                </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. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper, magna a ultricies volutpat, mi eros viverra massa, vitae consequat nisi justo in tortor. Proin accumsan felis ac felis dapibus, non iaculis
                            mi varius.
                        </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