content logo

Bootstrap Tabs:

CSS Bootstrap Tabs with Selection Effect

We can use this code to beautify your website and collect content in categories. In this code, the tabs have a white background. Each tab has a border with its text. The unselected tab has a gray background and color. The selected tab has a white background and the title color is blue. There is also a thin blue line on top of the selected tab. The text is also black.

#Simple Bootstrap Tabs Code #Free Bootstrap Tabs #Tabs with Select Effect #HTML White Tabs Code

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

</body>
</html>
Preview