content logo

Bootstrap Tabs:

Bootstrap Tabs with Horizontal Underline Effect

There are many different design elements you can use in your website that will improve the look and functionality of it by different amounts. Tabs are one of such features and provide a lot of usability and easy to understand layout options. They will also help reduce the loading time as the information is hidden behind different tabs and will only be displayed once the respective tab has been selected. A faster loading speed means more satisfied users and therefore more potential customers for your business. Besides better performance, these tabs can provide beautiful web designs and stylish appearances. This will boost the way your website looks in an instant. Also, the tabs will make your website seem more professional and stand out among the rest of your competitors.

In this post, we have a professionally designed Bootstrap tabs template. These are horizontal tabs and feature only one row. When there are multiple rows of tabs, it creates jumping user interface elements which will make it more confusing for the users to remember which tabs they already clicked on. This beautiful tab with hover effect has an underline effect which makes the design even better. All of this make our beautiful white tab perfect for any website looking to improve.

 

 

#

Horizontal Tabs

#

Bootstrap Tabs

#

White Tab

#

Beautiful Tab with Hover

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="">
            <!-- Nav tabs -->
            <div class="card">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                    <li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
                    <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">Contacts</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <legend>Responsive Tabs</legend>
                        <p>If you are on desktop Try resizing the window to mobile view to see the scroll effect</p>
                        <p>Horizontal scrollable tabs</p>
                        <p>Best for mobile view</p>
                        <p>Similar to gravity MODE_SCROLLABLE in Android</p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <legend>Profile</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book.
                    </div>
                    <div role="tabpanel" class="tab-pane" id="messages">
                        <legend>Messages</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                    <div role="tabpanel" class="tab-pane" id="settings">
                        <legend>Settings</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets containing Lorem Ipsum passage..
                    </div>
                    <div role="tabpanel" class="tab-pane" id="about">
                        <legend>About</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book. It has survived not only five centuries, but also the leap into 1960s with the release of Letraset sheets containing Lorem Ipsum passage..
                    </div>
                    <div role="tabpanel" class="tab-pane" id="contact">
                        <legend>Contact Us</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,, but also the leap into electronic typesetting, remaining
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background: #edecec;
    margin: 20px;
}
.nav-tabs {
    display: inline-flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 2px solid #ddd;
    -ms-overflow-style: none; /*// IE 10+*/
    overflow: -moz-scrollbars-none; /*// Firefox*/
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-width: 0;
}
.nav-tabs > li > a {
    border: none;
    color: #666;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
    border: none;
    color: #4285f4 !important;
    background: transparent;
}
.nav-tabs > li > a::after {
    content: "";
    background: #4285f4;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}
.nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after {
    transform: scale(1);
}
.tab-nav > li > a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}
.tab-pane {
    padding: 15px 0;
}
.tab-content {
    padding: 20px;
}

.nav-tabs::-webkit-scrollbar {
    display: none; /*Safari and Chrome*/
}
.card {
    background: #fff none repeat scroll 0% 0%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    border-radius: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
body {
    background: #edecec;
    margin: 20px;
}
.nav-tabs {
    display: inline-flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 2px solid #ddd;
    -ms-overflow-style: none; /*// IE 10+*/
    overflow: -moz-scrollbars-none; /*// Firefox*/
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-width: 0;
}
.nav-tabs > li > a {
    border: none;
    color: #666;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
    border: none;
    color: #4285f4 !important;
    background: transparent;
}
.nav-tabs > li > a::after {
    content: "";
    background: #4285f4;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}
.nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after {
    transform: scale(1);
}
.tab-nav > li > a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}
.tab-pane {
    padding: 15px 0;
}
.tab-content {
    padding: 20px;
}

.nav-tabs::-webkit-scrollbar {
    display: none; /*Safari and Chrome*/
}
.card {
    background: #fff none repeat scroll 0% 0%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    border-radius: 5px;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="">
            <!-- Nav tabs -->
            <div class="card">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                    <li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
                    <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">Contacts</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <legend>Responsive Tabs</legend>
                        <p>If you are on desktop Try resizing the window to mobile view to see the scroll effect</p>
                        <p>Horizontal scrollable tabs</p>
                        <p>Best for mobile view</p>
                        <p>Similar to gravity MODE_SCROLLABLE in Android</p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <legend>Profile</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book.
                    </div>
                    <div role="tabpanel" class="tab-pane" id="messages">
                        <legend>Messages</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                    </div>
                    <div role="tabpanel" class="tab-pane" id="settings">
                        <legend>Settings</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets containing Lorem Ipsum passage..
                    </div>
                    <div role="tabpanel" class="tab-pane" id="about">
                        <legend>About</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
                        to make a type specimen book. It has survived not only five centuries, but also the leap into 1960s with the release of Letraset sheets containing Lorem Ipsum passage..
                    </div>
                    <div role="tabpanel" class="tab-pane" id="contact">
                        <legend>Contact Us</legend>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,, but also the leap into electronic typesetting, remaining
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..
                    </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