content logo

Bootstrap Tabs:

CSS Bootstrap Tabs with Selection Effect

If you have seen the advanced website, you probably know that tabs are the most critical elements of these pages. These functional factors help you collect your website's content in many categories. Here we have prepared the CSS Bootstrap Tabs with Selection Effect in a beautiful design. This Simple Bootstrap Tabs Code improves the uniqueness of your website and increases your audience quickly. These Free Bootstrap Tabs can easily enhance your website and save much physical space.

The following preview shows the white background of the detailed part and all sections, and the writings of the detailed part are black. On the other hand, all sections in the HTML White Tabs Code have a dark gray background with a light title. As you place the mouse on a part, its writing changes to black. As soon as you click on this section, its background turns white, and you can see a blue line at the bottom of the selected part. This is a point that helps the visitors to distinguish the selected part from others quickly. The Tabs with Select Effect are so creative and increase the beauty of your website. So, download it from the link below and apply on your website.

#

Simple Bootstrap Tabs Code

#

Free Bootstrap Tabs

#

Tabs with Select Effect

#

HTML White Tabs Code

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div>
                <!-- 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>Section 1</h3>
                        <p>
                            1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra sapien metus, et volutpat ex bibendum nec. Duis consectetur posuere faucibus. Cras justo metus, tincidunt varius enim ac, vulputate euismod
                            tortor. Etiam eu elementum ex, non condimentum nibh. Sed lacinia.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque iaculis sagittis. Cras et convallis risus, nec maximus justo. Mauris dignissim tellus eu lorem efficitur faucibus. Etiam diam risus,
                            molestie eu porta sit amet, bibendum nec nisi. Ut iaculis pulvinar dapibus. Cras diam turpis, tincidunt ac efficitur id, dignissim at.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            3 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius quis ipsum a rutrum. Donec quis consequat sem. Donec gravida nisi quis nibh vestibulum ullamcorper. Suspendisse turpis sapien, lobortis
                            vel.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section4">
                        <h3>Section 4</h3>
                        <p>
                            4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ante in velit faucibus, a efficitur nisl vestibulum. Sed a nisi eget tellus eleifend mattis. Nam vulputate leo in posuere imperdiet.
                            Mauris a mollis nulla. Nulla euismod sed neque eget lacinia. Donec at lacus et arcu consectetur aliquet ac sed tellus. Donec non dapibus turpis
                        </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;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: 1px solid #e4e4e4;
}
.nav-tabs > li {
    margin-right: 1px;
}
.nav-tabs > li > a {
    border-radius: 0px;
    border: 1px solid #e4e4e4;
    border-right: 0px none;
    margin-right: 0px;
    padding: 8px 17px;
    color: #222222;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child {
    border-right: 1px solid #ededed;
}
.nav-tabs > li > a {
    padding: 15px 30px;
    border: 1px solid #ededed;
    border-right: 0px none;
    border-top: 2px solid #ededed;
    background: #ededed;
    color: #8f8f8f;
    font-weight: bold;
}
.nav-tabs > li > a:hover {
    border-bottom-color: #ededed;
    border-right: 0px none;
    background: #f1f1f1;
    color: #444;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-top: 2px solid #3498db;
    border-right: 0px none;
    color: #444;
}
.tab-content > .tab-pane {
    border: 1px solid #e4e4e4;
    border-top: 0px none;
    padding: 20px;
    line-height: 22px;
}
.tab-content > .tab-pane > 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 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;
}
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
.nav-tabs {
    border-bottom: 1px solid #e4e4e4;
}
.nav-tabs > li {
    margin-right: 1px;
}
.nav-tabs > li > a {
    border-radius: 0px;
    border: 1px solid #e4e4e4;
    border-right: 0px none;
    margin-right: 0px;
    padding: 8px 17px;
    color: #222222;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs > li:last-child {
    border-right: 1px solid #ededed;
}
.nav-tabs > li > a {
    padding: 15px 30px;
    border: 1px solid #ededed;
    border-right: 0px none;
    border-top: 2px solid #ededed;
    background: #ededed;
    color: #8f8f8f;
    font-weight: bold;
}
.nav-tabs > li > a:hover {
    border-bottom-color: #ededed;
    border-right: 0px none;
    background: #f1f1f1;
    color: #444;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-top: 2px solid #3498db;
    border-right: 0px none;
    color: #444;
}
.tab-content > .tab-pane {
    border: 1px solid #e4e4e4;
    border-top: 0px none;
    padding: 20px;
    line-height: 22px;
}
.tab-content > .tab-pane > h3 {
    margin-top: 0;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div>
                <!-- 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>Section 1</h3>
                        <p>
                            1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra sapien metus, et volutpat ex bibendum nec. Duis consectetur posuere faucibus. Cras justo metus, tincidunt varius enim ac, vulputate euismod
                            tortor. Etiam eu elementum ex, non condimentum nibh. Sed lacinia.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque iaculis sagittis. Cras et convallis risus, nec maximus justo. Mauris dignissim tellus eu lorem efficitur faucibus. Etiam diam risus,
                            molestie eu porta sit amet, bibendum nec nisi. Ut iaculis pulvinar dapibus. Cras diam turpis, tincidunt ac efficitur id, dignissim at.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            3 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius quis ipsum a rutrum. Donec quis consequat sem. Donec gravida nisi quis nibh vestibulum ullamcorper. Suspendisse turpis sapien, lobortis
                            vel.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section4">
                        <h3>Section 4</h3>
                        <p>
                            4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ante in velit faucibus, a efficitur nisl vestibulum. Sed a nisi eget tellus eleifend mattis. Nam vulputate leo in posuere imperdiet.
                            Mauris a mollis nulla. Nulla euismod sed neque eget lacinia. Donec at lacus et arcu consectetur aliquet ac sed tellus. Donec non dapibus turpis
                        </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