content logo

Bootstrap Tabs:

Bootstrap Tabs with Parallelogram Yellow Background

The bootstrap tab is one of the most important elements in the appearance of a website and if you choose your bootstrap tab consciously, you can make sure that many people will stay on your products easily. In this post, we have provided Bootstrap Tabs with Parallelogram Yellow Background for you to use on any kind of website. As you can see here, the theme of this bootstrap is yellow and it is so unique. There are three sections that you can rename the title of each one that you like. The background of these sections is white and the writings are light black. After you move the mouse to click on one specific section, you can see an animating effect in yellow.

These Bootstrap Yellow Tabs have a different appearance and are a little oblique. This animating effect is shown so beautifully. After you select the Tabs with Parallelogram Background, the color of the writing section will change to white. The color of these Tabs with Sliding Effect doesn’t cover all parts and has a beautiful design. The detailed part of these Bootstrap Animating Tabs has a dark background with white writing. You can see two white triangles in the corners of this part.

#

Bootstrap Yellow Tabs

#

Tabs with Sliding Effect

#

Bootstrap Animating Tabs

#

Tabs with Parallelogram Background

<!-- 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 .nav-tabs{ border: none; }
.tab .nav-tabs li a{
    padding: 12px 15px;
    margin-right: 10px;
    font-size: 17px;
    font-weight: 800;
    color: #9b9b9c;
    text-transform: uppercase;
    border: 2px solid #e5e7e9;
    border-radius: 0;
    overflow: hidden;
    z-index: 1;
    position: relative;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li a:focus,
.tab .nav-tabs li.active a{
    background: transparent;
    border: 2px solid #3a506b;
    color: #fff;
}
.tab .nav-tabs li a:before{
    content: "";
    width: 500%;
    height: 0;
    background: #ff9f1c;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transition: all 0.3s ease-in-out 0s;
}
.tab .nav-tabs li a:hover:before,
.tab .nav-tabs li.active a:before{
    height: 170%;
    opacity: 1;
}
.tab .tab-content{
    padding: 20px 30px;
    margin-top: 10px;
    font-size: 15px;
    color: #fff;
    line-height: 27px;
    letter-spacing: 1px;
    background: #3a506b;
    position: relative;
}
.tab .tab-content:before{
    content: "";
    border-top: 30px solid #fff;
    border-bottom: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}
.tab .tab-content:after{
    content: "";
    border-bottom: 30px solid #fff;
    border-top: 30px solid transparent;
    border-left: 30px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}
@media only screen and (max-width: 479px){
    .tab .nav-tabs li{
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    .tab .nav-tabs li:last-child{ margin-bottom: 0; }
    .tab .nav-tabs li a:hover:before,
    .tab .nav-tabs li.active a:before{ height: 400%; }
}
<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 .nav-tabs{ border: none; }
.tab .nav-tabs li a{
    padding: 12px 15px;
    margin-right: 10px;
    font-size: 17px;
    font-weight: 800;
    color: #9b9b9c;
    text-transform: uppercase;
    border: 2px solid #e5e7e9;
    border-radius: 0;
    overflow: hidden;
    z-index: 1;
    position: relative;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li a:focus,
.tab .nav-tabs li.active a{
    background: transparent;
    border: 2px solid #3a506b;
    color: #fff;
}
.tab .nav-tabs li a:before{
    content: "";
    width: 500%;
    height: 0;
    background: #ff9f1c;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transition: all 0.3s ease-in-out 0s;
}
.tab .nav-tabs li a:hover:before,
.tab .nav-tabs li.active a:before{
    height: 170%;
    opacity: 1;
}
.tab .tab-content{
    padding: 20px 30px;
    margin-top: 10px;
    font-size: 15px;
    color: #fff;
    line-height: 27px;
    letter-spacing: 1px;
    background: #3a506b;
    position: relative;
}
.tab .tab-content:before{
    content: "";
    border-top: 30px solid #fff;
    border-bottom: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}
.tab .tab-content:after{
    content: "";
    border-bottom: 30px solid #fff;
    border-top: 30px solid transparent;
    border-left: 30px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}
@media only screen and (max-width: 479px){
    .tab .nav-tabs li{
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    .tab .nav-tabs li:last-child{ margin-bottom: 0; }
    .tab .nav-tabs li a:hover:before,
    .tab .nav-tabs li.active a:before{ height: 400%; }
}
</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