Bootstrap Tabs:

Simple Bootstrap Tabs with Fading Effect and Blue Header Text

Simplicity is always the best choice in every design. Consider this phrase in the design of websites, too. So, if you own a website, you can use a simple bootstrap to gain more visitors because most people like simplicity. The Simple Bootstrap Tabs with Fading Effect and Blue Header Text are placed here with a beautiful theme. These beautiful Free Bootstrap Tabs make your website regular. You can divide all information into several sections. The main goal of these CSS Simple Tabs is to save the physical space of the website and mention much data into half of a page.

By looking at the HTML Tabs Code below, you figure out that the backgrounds of the sections and the detailed part are simply white. After placing the mouse on each section, you will face a blue color on titles. Plus, there is a blue line under these Bootstrap Tabs Header. This helps the users to distinguish the selected part from the unselected ones. As soon as you click on that section, the detailed part will be presented with a fading effect. The Bootstrap Tabs Effect lets you attract people and change your website’s appearance.

Free Bootstrap Tabs

CSS Simple Tabs

Bootstrap Tabs Effect

HTML Tabs Code

Bootstrap Tabs Header

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

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars