content logo

Bootstrap Tabs:

Responsive Bootstrap Tabs with Notifications Counter

Most advanced websites use tabs to organize their content. These tabs are so functional and help website’s owner to gain more visitors. The Responsive Bootstrap Tabs with Notifications Counter present an attractive design in the following post. The Bootstrap Tabs Code helps you classify your website’s data and content into several items. To make your website more attractive and organized, use the mentioned Free Red Tabs Code and organize the content into three or more sections.

By looking at this preview, you can understand that the background of the detailed part is white with black writings. On the other hand, the sections have a black theme, and the titles are white. Some numbered icons in red are placed in these CSS Tabs Notification. There is a black line at the top of these parts with a small space. Once you move the mouse on a significant section and select it, the background will be white with a gray title. The selected part of these HTML Tabs with Icons has a red line at the top side. This makes the chosen section more distinguishable. You can easily download and use the Bootstrap Responsive Tabs and attract more audiences.

#

Bootstrap Tabs Code

#

Free Red Tabs Code

#

HTML Tabs with Icons

#

Bootstrap Responsive Tabs

#

CSS Tabs Notification

<!-- 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"><span>1</span>Section</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><span>2</span>Section</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><span>3</span>Section</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="Section1">
                        <h3>Web Development</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut maximus purus, quis condimentum odio. Pellentesque lorem ex, tempor sit amet justo.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section2">
                        <h3>Brand Building</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper accumsan urna, nec faucibus sem sagittis id. Pellentesque finibus, eros a aliquet ornare, mi est ullamcorper neque, eu accumsan justo massa nec
                            elit. Sed ac leo et erat gravida maximus.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section3">
                        <h3>Responsive Design</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum sed diam ac fermentum. Mauris nec pellentesque neque. Cras nec diam euismod, congue sapien eu, fermentum libero. Vestibulum quis sem.
                        </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;
}
.nav-tabs > li {
    margin-bottom: -2px;
}
.tab li a {
    background: #3a3d41;
    color: #fff;
    border-radius: 0;
    margin: 0;
    padding: 10px 15px;
    border: none;
}
.tab li {
    border-top: 3px solid #3a3d41;
}
.tab li.active {
    background: #ffffff;
    border-top: 3px solid #ea5e50;
    color: #7e828a;
}
.tab li a:hover {
    background: #3a3d41;
    color: #ffffff;
}
.tab span {
    background: #ea5e50;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    height: 21px;
    width: 21px;
    line-height: 21px;
    margin-right: 8px;
    display: inline-block;
}
.tab-content {
    border: 1px solid #ddd;
    border-top: 0px none;
    padding: 12px;
}
.tab-content h3 {
    margin-top: 0;
}
<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;
}
.nav-tabs > li {
    margin-bottom: -2px;
}
.tab li a {
    background: #3a3d41;
    color: #fff;
    border-radius: 0;
    margin: 0;
    padding: 10px 15px;
    border: none;
}
.tab li {
    border-top: 3px solid #3a3d41;
}
.tab li.active {
    background: #ffffff;
    border-top: 3px solid #ea5e50;
    color: #7e828a;
}
.tab li a:hover {
    background: #3a3d41;
    color: #ffffff;
}
.tab span {
    background: #ea5e50;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    height: 21px;
    width: 21px;
    line-height: 21px;
    margin-right: 8px;
    display: inline-block;
}
.tab-content {
    border: 1px solid #ddd;
    border-top: 0px none;
    padding: 12px;
}
.tab-content h3 {
    margin-top: 0;
}
</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"><span>1</span>Section</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><span>2</span>Section</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><span>3</span>Section</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="Section1">
                        <h3>Web Development</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut maximus purus, quis condimentum odio. Pellentesque lorem ex, tempor sit amet justo.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section2">
                        <h3>Brand Building</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper accumsan urna, nec faucibus sem sagittis id. Pellentesque finibus, eros a aliquet ornare, mi est ullamcorper neque, eu accumsan justo massa nec
                            elit. Sed ac leo et erat gravida maximus.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section3">
                        <h3>Responsive Design</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum sed diam ac fermentum. Mauris nec pellentesque neque. Cras nec diam euismod, congue sapien eu, fermentum libero. Vestibulum quis sem.
                        </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