content logo

Bootstrap Tabs:

Responsive Bootstrap Tabs with Notifications Counter

To make your website more beautiful and increase the number of visitors, you can use the CSS code and make them more beautiful by adding visual details to the various elements of the website. In this code, with the help of Bootstrap and CSS for tabs, we have increased the appearance details that we can use to make tabs more beautiful. One of these details is the existence of a border for texts. Another case is the tab of the tabs. Unselected tabs are black and selected ones turn red. Inside each tab there is an icon that displays the tab number from the left. The background color of the icon contrasts with the color of the tab. The text in this tab is black.

# Bootstrap Tabs Code #Free Red Tabs Code #HTML Tabs with Icons #Bootstrap Responsive Tabs #CSS Tabs Notification

<!-- This script got from www.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://www.frontendfreecode.com">Frontend Free Code</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 www.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">Frontend Free Code</a></div>

</body>
</html>
Preview