content logo

Bootstrap Tabs:

Simple Gray Tabs with Border in Bootstrap

As you know, tabs have a significant impact on the design of the website and can attract many people. On the other side, if it has a simple design, more visitors will like it because most people like simplicity. If you are looking for a beautiful theme for your website, you can use the Simple Gray Tabs with Border in Bootstrap. The following Bootstrap Simple Tabs are presented here to use them functionally. These kinds of Simple CSS Tabs help the website owner classify the information and data into several parts and organize its design.

This bootstrap has a simple theme with white background. Both sections and the detailed part have a white and pure background. The color of the writings of the unselected parts is gray, as same as the text at the bottom. Moreover, these sections are separated with some borders. One of the characteristics of these Tabs with Border is that you can rename the titles. The upside border will change to purple as you click on a specific section, and the title will turn black. Plus, the detailed part appears with a faded effect. You can download the Bootstrap Gray Tabs and apply them to your website.

#

Bootstrap Simple Tabs

#

Tabs with Border

#

Bootstrap Gray Tabs

#

Simple CSS Tabs

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <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>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h3>Section 1</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </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 {
    outline: none;
    text-decoration: none;
}
.tab {
    border: 1px solid #c2c2c2;
}
.tab .nav-tabs {
    background: #fff;
    border-top: 3px solid #303335;
}
.tab .nav-tabs li {
    margin: 0;
}
.tab .nav-tabs li a {
    font-size: 14px;
    color: #999898;
    background: #fff;
    margin: 0;
    padding: 20px 25px;
    border-radius: 0;
    border: none;
    border-right: 1px solid #c2c2c2;
    text-transform: uppercase;
}
.tab .nav-tabs li a:hover {
    border-top: none;
    border-bottom: none;
    border-right-color: #c2c2c2;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:hover {
    color: #000;
    border-top: 3px solid #a5658b;
    border-left: none;
    border-bottom: none;
    margin: -3px 0 0 0;
}
.tab .nav-tabs li.active a:hover {
    border-right-color: #c2c2c2;
}
.tab .tab-content {
    font-size: 13px;
    color: #999898;
    line-height: 25px;
    background: #fff;
    padding: 20px;
}
.tab .tab-content h3 {
    font-size: 24px;
    color: #999898;
    margin-top: 0;
}
@media only screen and (max-width: 480px) {
    .tab .nav-tabs {
        border-top: none;
    }
    .tab .nav-tabs li {
        width: 100%;
    }
    .tab .nav-tabs li a {
        border: none;
        border-bottom: 1px solid #c2c2c2;
    }
    .tab .nav-tabs li a:hover {
        border-bottom: 1px solid #c2c2c2;
    }
    .tab .nav-tabs li:last-child a {
        border-bottom: none;
    }
    .tab .nav-tabs li.active a:hover,
    .tab .nav-tabs li.active a {
        border-bottom: 1px solid #c2c2c2;
        border-right: none;
    }
}
<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 {
    outline: none;
    text-decoration: none;
}
.tab {
    border: 1px solid #c2c2c2;
}
.tab .nav-tabs {
    background: #fff;
    border-top: 3px solid #303335;
}
.tab .nav-tabs li {
    margin: 0;
}
.tab .nav-tabs li a {
    font-size: 14px;
    color: #999898;
    background: #fff;
    margin: 0;
    padding: 20px 25px;
    border-radius: 0;
    border: none;
    border-right: 1px solid #c2c2c2;
    text-transform: uppercase;
}
.tab .nav-tabs li a:hover {
    border-top: none;
    border-bottom: none;
    border-right-color: #c2c2c2;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:hover {
    color: #000;
    border-top: 3px solid #a5658b;
    border-left: none;
    border-bottom: none;
    margin: -3px 0 0 0;
}
.tab .nav-tabs li.active a:hover {
    border-right-color: #c2c2c2;
}
.tab .tab-content {
    font-size: 13px;
    color: #999898;
    line-height: 25px;
    background: #fff;
    padding: 20px;
}
.tab .tab-content h3 {
    font-size: 24px;
    color: #999898;
    margin-top: 0;
}
@media only screen and (max-width: 480px) {
    .tab .nav-tabs {
        border-top: none;
    }
    .tab .nav-tabs li {
        width: 100%;
    }
    .tab .nav-tabs li a {
        border: none;
        border-bottom: 1px solid #c2c2c2;
    }
    .tab .nav-tabs li a:hover {
        border-bottom: 1px solid #c2c2c2;
    }
    .tab .nav-tabs li:last-child a {
        border-bottom: none;
    }
    .tab .nav-tabs li.active a:hover,
    .tab .nav-tabs li.active a {
        border-bottom: 1px solid #c2c2c2;
        border-right: none;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <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>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h3>Section 1</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id,
                            rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus
                            scelerisque.
                        </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