content logo

Bootstrap Tabs:

Simple Bootstrap Tabs with Fading Effect and Blue Header Text

Tabs can be used for tasks such as categorizing content or staging a task. We also have a tab in the code to do these things. This tab is simple and has no specific background color. Therefore, it is used in all websites. Another feature of these tabs is the presence of a blue line effect in the selected tab. The title of the tab that is selected also turns blue. This feature is also available in Hover mode. The title colors of tabs and texts are black. This tab has no borders or shadows.

#Free Bootstrap Tabs #CSS Simple Tabs #Bootstrap Tabs Effect #HTML Tabs Code #Bootstrap Tabs Header

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <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="messages" role="tab" data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra porttitor ligula, quis fringilla velit pharetra suscipit. Nullam cursus condimentum lectus, in pellentesque velit egestas mattis.
                            Aenean consequat, ante eget ultrices luctus, justo ipsum suscipit libero, quis bibendum leo est eu enim. Nunc non arcu neque. Sed sollicitudin, erat vitae luctus mollis, justo mauris laoreet felis, ut ullamcorper
                            augue massa vitae urna. Vivamus imperdiet feugiat aliquam. Mauris lorem lacus, pretium eu ultrices quis, vulputate sit amet lectus. Morbi commodo odio sit amet mattis ullamcorper.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            2 - Nulla mollis congue iaculis. Quisque efficitur, dui in euismod vestibulum, felis ligula vulputate arcu, condimentum bibendum leo dui rhoncus sapien. Nulla vulputate tincidunt mi, quis mattis dolor pretium et.
                            Mauris vel magna accumsan, semper risus in, malesuada purus. Sed vitae diam lobortis, ultrices lacus sit amet, lobortis lectus. Vivamus eget arcu neque. Ut sed orci nunc. Suspendisse sagittis vulputate odio.
                            Curabitur commodo elit ac leo fermentum, in blandit ante aliquam. Donec lacinia diam ac turpis maximus auctor. Sed iaculis nibh et ex dignissim, non interdum diam consequat.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra porttitor ligula, quis fringilla velit pharetra suscipit. Nullam cursus condimentum lectus, in pellentesque velit egestas mattis.
                            Aenean consequat, ante eget ultrices luctus, justo ipsum suscipit libero, quis bibendum leo est eu enim. Nunc non arcu neque. Sed sollicitudin, erat vitae luctus mollis, justo mauris laoreet felis, ut ullamcorper
                            augue massa vitae urna. Vivamus imperdiet feugiat aliquam. Mauris lorem lacus, pretium eu ultrices quis, vulputate sit amet lectus. Morbi commodo odio sit amet mattis ullamcorper.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section4">
                        <p>
                            4 - Nulla mollis congue iaculis. Quisque efficitur, dui in euismod vestibulum, felis ligula vulputate arcu, condimentum bibendum leo dui rhoncus sapien. Nulla vulputate tincidunt mi, quis mattis dolor pretium et.
                            Mauris vel magna accumsan, semper risus in, malesuada purus. Sed vitae diam lobortis, ultrices lacus sit amet, lobortis lectus. Vivamus eget arcu neque. Ut sed orci nunc. Suspendisse sagittis vulputate odio.
                            Curabitur commodo elit ac leo fermentum, in blandit ante aliquam. Donec lacinia diam ac turpis maximus auctor. Sed iaculis nibh et ex dignissim, non interdum diam consequat.
                        </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  .nav-tabs{
    border-bottom: 0px solid transparent;
    margin-bottom:1px;
}
.tab .nav-tabs > li{
    padding:0 20px;
}
.tab .nav-tabs > li a {
    font-size:14px;
    color:#808080;
}
.tab .nav-tabs > li a:hover,
.tab .nav-tabs > li.active > a{
    background:#fff;
    color: #3498db;
    padding-bottom:5px;
    border:1px solid transparent;
    border-bottom:1px solid #3498db;
}
.tab .tab-content{
    color:#5a5c5d;
    padding: 20px;
}
@media only screen and (max-width: 480px){
    .tab .nav-tabs > li{ width:100%; }
}
<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  .nav-tabs{
    border-bottom: 0px solid transparent;
    margin-bottom:1px;
}
.tab .nav-tabs > li{
    padding:0 20px;
}
.tab .nav-tabs > li a {
    font-size:14px;
    color:#808080;
}
.tab .nav-tabs > li a:hover,
.tab .nav-tabs > li.active > a{
    background:#fff;
    color: #3498db;
    padding-bottom:5px;
    border:1px solid transparent;
    border-bottom:1px solid #3498db;
}
.tab .tab-content{
    color:#5a5c5d;
    padding: 20px;
}
@media only screen and (max-width: 480px){
    .tab .nav-tabs > li{ width:100%; }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <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="messages" role="tab" data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>
                            1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra porttitor ligula, quis fringilla velit pharetra suscipit. Nullam cursus condimentum lectus, in pellentesque velit egestas mattis.
                            Aenean consequat, ante eget ultrices luctus, justo ipsum suscipit libero, quis bibendum leo est eu enim. Nunc non arcu neque. Sed sollicitudin, erat vitae luctus mollis, justo mauris laoreet felis, ut ullamcorper
                            augue massa vitae urna. Vivamus imperdiet feugiat aliquam. Mauris lorem lacus, pretium eu ultrices quis, vulputate sit amet lectus. Morbi commodo odio sit amet mattis ullamcorper.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>
                            2 - Nulla mollis congue iaculis. Quisque efficitur, dui in euismod vestibulum, felis ligula vulputate arcu, condimentum bibendum leo dui rhoncus sapien. Nulla vulputate tincidunt mi, quis mattis dolor pretium et.
                            Mauris vel magna accumsan, semper risus in, malesuada purus. Sed vitae diam lobortis, ultrices lacus sit amet, lobortis lectus. Vivamus eget arcu neque. Ut sed orci nunc. Suspendisse sagittis vulputate odio.
                            Curabitur commodo elit ac leo fermentum, in blandit ante aliquam. Donec lacinia diam ac turpis maximus auctor. Sed iaculis nibh et ex dignissim, non interdum diam consequat.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>
                            3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra porttitor ligula, quis fringilla velit pharetra suscipit. Nullam cursus condimentum lectus, in pellentesque velit egestas mattis.
                            Aenean consequat, ante eget ultrices luctus, justo ipsum suscipit libero, quis bibendum leo est eu enim. Nunc non arcu neque. Sed sollicitudin, erat vitae luctus mollis, justo mauris laoreet felis, ut ullamcorper
                            augue massa vitae urna. Vivamus imperdiet feugiat aliquam. Mauris lorem lacus, pretium eu ultrices quis, vulputate sit amet lectus. Morbi commodo odio sit amet mattis ullamcorper.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section4">
                        <p>
                            4 - Nulla mollis congue iaculis. Quisque efficitur, dui in euismod vestibulum, felis ligula vulputate arcu, condimentum bibendum leo dui rhoncus sapien. Nulla vulputate tincidunt mi, quis mattis dolor pretium et.
                            Mauris vel magna accumsan, semper risus in, malesuada purus. Sed vitae diam lobortis, ultrices lacus sit amet, lobortis lectus. Vivamus eget arcu neque. Ut sed orci nunc. Suspendisse sagittis vulputate odio.
                            Curabitur commodo elit ac leo fermentum, in blandit ante aliquam. Donec lacinia diam ac turpis maximus auctor. Sed iaculis nibh et ex dignissim, non interdum diam consequat.
                        </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