content logo

Bootstrap Tabs:

Gray and Red Bootstrap Tabs with Buttons in Header

Tabs can be used to better organize the content of a website or to stage a task. In this code, we also have tabs that we can use to organize the content of the site. These tabs are like buttons. Any tab that is not selected is gray and any tab that is selected is red. The background of the texts is white and the colors of the texts are black. Tabs have an icon to the left of their title and the color of the tab title and their icon is white. There is no border for tabs or their texts.

#Bootstrap Tabs Button #Free Bootstrap Tabs #Bootstrap Gray and Red Tabs #HTML Free Tabs Code

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <!-- 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">
                    <h4>Section 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section2">
                    <h4>Section 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section3">
                    <h4>Section 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
                    </p>
                </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;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: none;
    margin-bottom: 25px;
}
.nav-tabs > li {
    border-bottom: none;
    margin-right: 10px;
}
.nav-tabs > li > a {
    background: rgba(171, 171, 171, 0.7);
    padding: 10px 25px;
    border-radius: 4px;
    color: #fff;
    border-bottom: 1px solid #adadad;
    transition: all 0.3s ease 0s;
}
.nav-tabs > li > a:hover {
    background: #ababab;
    border-bottom: 1px solid #ababab;
}
.nav-tabs > li > a > i {
    margin-right: 7px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: #e74c3c;
    color: #fff;
    border-bottom: 1px solid #e74c3c;
}
.tab-content h4 {
    font-weight: 600;
}
.tab-content p {
    color: #717171;
}
<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 www.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;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: none;
    margin-bottom: 25px;
}
.nav-tabs > li {
    border-bottom: none;
    margin-right: 10px;
}
.nav-tabs > li > a {
    background: rgba(171, 171, 171, 0.7);
    padding: 10px 25px;
    border-radius: 4px;
    color: #fff;
    border-bottom: 1px solid #adadad;
    transition: all 0.3s ease 0s;
}
.nav-tabs > li > a:hover {
    background: #ababab;
    border-bottom: 1px solid #ababab;
}
.nav-tabs > li > a > i {
    margin-right: 7px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: #e74c3c;
    color: #fff;
    border-bottom: 1px solid #e74c3c;
}
.tab-content h4 {
    font-weight: 600;
}
.tab-content p {
    color: #717171;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <!-- 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">
                    <h4>Section 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section2">
                    <h4>Section 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
                    </p>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="Section3">
                    <h4>Section 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit dui vitae leo efficitur, et rutrum nisi fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
                    </p>
                </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