content logo

Bootstrap Tabs:

Bootstrap Oval Tabs

If you have a website and are looking for a beautiful and functional tab, pay attention to this post carefully. We have prepared the Bootstrap Oval Tabs in this post for you. By looking at the following preview, you understand that the Oval Red Tabs contain three sections, and each one has its text. These parts are separated, and by clicking on them, you can see their private information. So, these Simple Bootstrap Tabs allow you to classify your website's data into different sections and make it beautiful. This helps you to attract more people to your website.

As you can see here, this bootstrap has a red theme with a great design. These Bootstrap Red Tabs have an oval shape for each section. The unselected parts have a white background, and the titles are black. Once you place the cursor of the mouse or click on a part, some changes appear. You can see that the selected tab changes to red and the title turns white. Additionally, the detailed part has an attractive theme. It is like a massage design and connects to its specific section. You can download the Bootstrap Oval Shaped Tabs from the link below.

#

Oval Red Tabs

#

Bootstrap Oval Shaped Tabs

#

Bootstrap Red Tabs

#

Simple Bootstrap 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="settings" 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">
                        <h2>Section 1</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus
                            purus euismod nec. Duis in lacinia neque. Etiam tellus.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h2>Section 2</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus
                            purus euismod nec. Duis in lacinia neque. Etiam tellus.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h2>Section 3</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus
                            purus euismod nec. Duis in lacinia neque. Etiam tellus.
                        </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 .nav-tabs {
    border-bottom: 0 none;
}
.tab .nav-tabs li {
    margin-right: 10px;
}
.tab .nav-tabs li a {
    padding: 15px 30px;
    font-size: 14px;
    color: #888;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #d3d3d3;
    position: relative;
}
.tab .nav-tabs li a:hover {
    background: #d96459;
    color: #fff;
    border-color: #d96459;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    background: #d96459;
    color: #fff;
    border-color: #d96459;
    transition: background 0.2s linear 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:after {
    content: "";
    border: 13px solid transparent;
    border-bottom-color: #d3d3d3;
    position: absolute;
    bottom: -26px;
    left: 37%;
}
.tab .nav-tabs li.active a:after {
    border-bottom-color: #fff;
    bottom: -27px;
}
.tab .tab-content {
    font-size: 14px;
    color: #333;
    background: #fdfdfd;
    line-height: 25px;
    padding: 20px 25px;
    margin-top: 25px;
    border: 1px solid #ddd;
}
.tab .tab-content h2 {
    font-size: 30px;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li a {
        padding: 20px;
        border-radius: 0;
    }
    .tab .nav-tabs li.active a:before,
    .tab .nav-tabs li.active a:after {
        border: none;
    }
    .tab .tab-content {
        margin-top: 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 .nav-tabs {
    border-bottom: 0 none;
}
.tab .nav-tabs li {
    margin-right: 10px;
}
.tab .nav-tabs li a {
    padding: 15px 30px;
    font-size: 14px;
    color: #888;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #d3d3d3;
    position: relative;
}
.tab .nav-tabs li a:hover {
    background: #d96459;
    color: #fff;
    border-color: #d96459;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    background: #d96459;
    color: #fff;
    border-color: #d96459;
    transition: background 0.2s linear 0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:after {
    content: "";
    border: 13px solid transparent;
    border-bottom-color: #d3d3d3;
    position: absolute;
    bottom: -26px;
    left: 37%;
}
.tab .nav-tabs li.active a:after {
    border-bottom-color: #fff;
    bottom: -27px;
}
.tab .tab-content {
    font-size: 14px;
    color: #333;
    background: #fdfdfd;
    line-height: 25px;
    padding: 20px 25px;
    margin-top: 25px;
    border: 1px solid #ddd;
}
.tab .tab-content h2 {
    font-size: 30px;
}
@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li a {
        padding: 20px;
        border-radius: 0;
    }
    .tab .nav-tabs li.active a:before,
    .tab .nav-tabs li.active a:after {
        border: none;
    }
    .tab .tab-content {
        margin-top: 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="settings" 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">
                        <h2>Section 1</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus
                            purus euismod nec. Duis in lacinia neque. Etiam tellus.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h2>Section 2</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus
                            purus euismod nec. Duis in lacinia neque. Etiam tellus.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h2>Section 3</h2>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium, metus et scelerisque dignissim, ligula est imperdiet nisl, sit amet malesuada nunc felis in nisi. Nullam dapibus ligula dui, in rhoncus
                            purus euismod nec. Duis in lacinia neque. Etiam tellus.
                        </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