content logo

Bootstrap Tabs:

Bootstrap Simple Tabs with Orange Underline for Selected Item

If you have a website and want a bootstrap to attract more visitors, pay attention to this post. Appearance is so important in all websites, and it is better to choose a bootstrap tab that makes your page beautiful. In this post, we have prepared a simple and nice code that is so functional. The Bootstrap Simple Tabs with Orange Underline for Selected Item are presented here with an adorable theme. Using these Bootstrap Free Tabs allows you to classify and organize the data and information of your website. As a result, you can save physical space and note a lot of information in a small space through these Simple Tabs with Icon.

As the mentioned preview shows, these HTML Bootstrap Tabs have a simple white background with an orange theme. The writings of these CSS Simple Tabs are black with a standard font. You can see three orange icons at the top of each section. There is a colorless line under all tabs. As you select one of the parts, this line will change to orange, and a triangle will be shown at the bottom of the Bootstrap Tabs Selected Item. This helps the users to distinguish the selected parts.

#

Bootstrap Free Tabs

#

Simple Tabs with Icon

#

HTML Bootstrap Tabs

#

CSS Simple Tabs

#

Bootstrap Tabs Selected Item

<!-- 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"><i class="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cube"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comment"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            1 - 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">
                        <p>
                            2 - 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">
                        <p>
                            3 - 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 li a {
    background: transparent;
    border-radius: 0;
    border: none;
    font-size: 16px;
    color: #868686;
    padding: 16px 22px 10px;
}
.tab .nav-tabs li a:hover {
    background: transparent;
}
.tab .nav-tabs li a i {
    display: block;
    text-align: center;
    margin-bottom: 4px;
    color: #e67e22;
}
.tab .nav-tabs li.active > a,
.tab .nav-tabs li.active > a:focus,
.tab .nav-tabs li.active > a:hover {
    border: none;
    border-bottom: 2px solid #e67e22;
    color: #868686;
}
.tab .nav-tabs li.active a:after {
    content: " ";
    position: absolute;
    bottom: 0%;
    left: 45%;
    border-width: 7px;
    border-style: solid;
    border-color: rgba(136, 183, 213, 0) rgba(136, 183, 213, 0) #e67e22;
}
.tab .tab-content {
    padding: 12px;
    color: #5a5c5d;
    font-size: 14px;
    margin-top: 0;
    border: none;
}
@media only screen and (max-width: 480px) {
    .tab .nav-tabs li {
        width: 100%;
    }
    .tab .nav-tabs li a {
        border: 1px solid lightgray;
        margin-bottom: 10px;
    }
    .tab .nav-tabs li a i {
        display: inline-block;
        margin-right: 15px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs > li.active a:focus,
    .tab .nav-tabs > li.active a:hover {
        border: 1px solid #e67e22;
    }
    .tab .nav-tabs > li.active > a:after {
        border: none;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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 li a {
    background: transparent;
    border-radius: 0;
    border: none;
    font-size: 16px;
    color: #868686;
    padding: 16px 22px 10px;
}
.tab .nav-tabs li a:hover {
    background: transparent;
}
.tab .nav-tabs li a i {
    display: block;
    text-align: center;
    margin-bottom: 4px;
    color: #e67e22;
}
.tab .nav-tabs li.active > a,
.tab .nav-tabs li.active > a:focus,
.tab .nav-tabs li.active > a:hover {
    border: none;
    border-bottom: 2px solid #e67e22;
    color: #868686;
}
.tab .nav-tabs li.active a:after {
    content: " ";
    position: absolute;
    bottom: 0%;
    left: 45%;
    border-width: 7px;
    border-style: solid;
    border-color: rgba(136, 183, 213, 0) rgba(136, 183, 213, 0) #e67e22;
}
.tab .tab-content {
    padding: 12px;
    color: #5a5c5d;
    font-size: 14px;
    margin-top: 0;
    border: none;
}
@media only screen and (max-width: 480px) {
    .tab .nav-tabs li {
        width: 100%;
    }
    .tab .nav-tabs li a {
        border: 1px solid lightgray;
        margin-bottom: 10px;
    }
    .tab .nav-tabs li a i {
        display: inline-block;
        margin-right: 15px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs > li.active a:focus,
    .tab .nav-tabs > li.active a:hover {
        border: 1px solid #e67e22;
    }
    .tab .nav-tabs > li.active > a:after {
        border: 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"><i class="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cube"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comment"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            1 - 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">
                        <p>
                            2 - 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">
                        <p>
                            3 - 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