content logo

Bootstrap Tabs:

Simple Responsive Tabs Using Bootstrap

Using simple but beautiful tabs can make your website different from other simple websites. In this code, the tabs have a black and pink theme. Below all the tabs is a complete red line that is the boundary between the texts and the tabs. The texts are gray and have a border. The title color of the tabs is white and the background color of the unselected tabs is black. The tab that is selected has a pink background. All tabs are rectangular in shape.

#Bootstrap Simple Tabs #Free Bootstrap Tabs Code #HTML Pink Tabs #CSS Responsive Tabs Code

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-1 col-md-10">
            <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">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
                    <li role="presentation"><a href="#Section4" aria-controls="settings" role="tab" data-toggle="tab">Section 4</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 eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean
                            vulputate nisl nec.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="Section2">
                        <h3>Brand Building</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet sodales mi. Nulla sollicitudin felis arcu, sed tempus lorem fermentum sit amet. Sed nec.</p>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="Section3">
                        <h3>Responsive Design</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sapien ut nisi pellentesque, et scelerisque eros varius. Aenean id purus quis ante convallis faucibus. Mauris aliquam nec ipsum a hendrerit.
                            Pellentesque habitant morbi tristique senectus et netus et malesuada.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="Section4">
                        <h3>Clean & Clear Design</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean
                            vulputate nisl nec.
                        </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;
}
.tab-content {
    border: 1px solid #ddd;
    padding: 12px;
    color: #7e828a;
}
.tab li a {
    border: none;
    border-right: 1px solid #394d58;
    border-radius: 0;
    background: #23323a;
    color: #fff;
    margin: 0;
    padding: 9px 15px;
}
.tab li a:hover {
    border: none;
    border-right: 1px solid #394d58;
    background: #23323a;
    color: #fff;
}
.tab li.active > a,
.tab .nav-tabs > li.active > a:focus,
.tab .nav-tabs > li.active > a:hover {
    background: #dc005a;
    color: #fff;
    border: none;
}
.tab .tab-content {
    border-top: 3px solid #dc005a;
}
<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;
}
.tab-content {
    border: 1px solid #ddd;
    padding: 12px;
    color: #7e828a;
}
.tab li a {
    border: none;
    border-right: 1px solid #394d58;
    border-radius: 0;
    background: #23323a;
    color: #fff;
    margin: 0;
    padding: 9px 15px;
}
.tab li a:hover {
    border: none;
    border-right: 1px solid #394d58;
    background: #23323a;
    color: #fff;
}
.tab li.active > a,
.tab .nav-tabs > li.active > a:focus,
.tab .nav-tabs > li.active > a:hover {
    background: #dc005a;
    color: #fff;
    border: none;
}
.tab .tab-content {
    border-top: 3px solid #dc005a;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-1 col-md-10">
            <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">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
                    <li role="presentation"><a href="#Section4" aria-controls="settings" role="tab" data-toggle="tab">Section 4</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 eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean
                            vulputate nisl nec.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="Section2">
                        <h3>Brand Building</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet sodales mi. Nulla sollicitudin felis arcu, sed tempus lorem fermentum sit amet. Sed nec.</p>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="Section3">
                        <h3>Responsive Design</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sapien ut nisi pellentesque, et scelerisque eros varius. Aenean id purus quis ante convallis faucibus. Mauris aliquam nec ipsum a hendrerit.
                            Pellentesque habitant morbi tristique senectus et netus et malesuada.
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane" id="Section4">
                        <h3>Clean & Clear Design</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean
                            vulputate nisl nec.
                        </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