content logo

Bootstrap Tabs:

Oblique Tabs Code with Flip Effect on Click using Bootstrap

Tabs are the inseparable sections on any website, and if you use these essential elements, you can be successful and gain many visitors. We have prepared the Oblique Tabs Code with Flip Effect on Click using Bootstrap in this post with an attractive design. This Free Oblique Tabs Code increases the beauty of your website and differentiates it from other ones. Additionally, these Bootstrap Oblique Tabs are beneficial and allow the website’s owner to classify different types of information into several sections. This makes your website more regular than before.

These Bootstrap Tabs on Click Effect have a blue and white theme. As the following preview shows, the detailed part has a white background, and its title is blue. On the other hand, you can see three blue sections that are settled obliquely. The design of these tabs is italic with a blue background and white title. As you place the mouse on a tab, it changes to gray and separates from others. Once you click on this section, a beautiful flip effect appears, and that tab turns white. Simultaneously, the last selected part changes to blue with the same flip effect. The Bootstrap Flip Effect has a significant impact on your website’s appearance.

#

Free Oblique Tabs Code

#

Bootstrap Oblique Tabs

#

Bootstrap Tabs on Click Effect

#

Bootstrap Flip Effect

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab">
                <!-- 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" class="blue">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" class="orange">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" class="pink">Section 3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h4>Section 1</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                            malesuada ipsum. Nam commodo, est nec dictum bibendum.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h4>Section 2</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                            malesuada ipsum. Nam commodo, est nec dictum bibendum.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h4>Section 3</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                            malesuada ipsum. Nam commodo, est nec dictum bibendum.
                        </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;
}
.nav-tabs {
    list-style: none;
    padding-left: 0;
}
.nav-tabs li {
    color: #fff;
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(330deg);
    transition: background 0.2s, color 0.2s, transform 0.5s, margin 0.4s;
}
.nav-tabs li:hover {
    margin-right: 30px;
}
.nav-tabs li.active {
    color: #3498db;
    background: #f2f2f2;
    transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg) skewX(330deg);
    transition: all 0.8s ease 0s;
}
.nav-tabs li a {
    border: none;
    outline: none;
    padding: 14px 28px;
    color: #fff;
    background: #3498db;
}
.nav-tabs li a:hover {
    color: #333;
}
.tab .tab-content h4 {
    color: #3498db;
}
@media only screen and (max-width: 480px) {
    .nav-tabs li {
        width: 100%;
        margin: 0 0 10px 0;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg);
    }
    .nav-tabs li.active {
        border-bottom: 1px solid #d3d3d3;
        transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg) skewX(0deg);
    }
}
<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;
}
.nav-tabs {
    list-style: none;
    padding-left: 0;
}
.nav-tabs li {
    color: #fff;
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(330deg);
    transition: background 0.2s, color 0.2s, transform 0.5s, margin 0.4s;
}
.nav-tabs li:hover {
    margin-right: 30px;
}
.nav-tabs li.active {
    color: #3498db;
    background: #f2f2f2;
    transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg) skewX(330deg);
    transition: all 0.8s ease 0s;
}
.nav-tabs li a {
    border: none;
    outline: none;
    padding: 14px 28px;
    color: #fff;
    background: #3498db;
}
.nav-tabs li a:hover {
    color: #333;
}
.tab .tab-content h4 {
    color: #3498db;
}
@media only screen and (max-width: 480px) {
    .nav-tabs li {
        width: 100%;
        margin: 0 0 10px 0;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg);
    }
    .nav-tabs li.active {
        border-bottom: 1px solid #d3d3d3;
        transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg) skewX(0deg);
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab">
                <!-- 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" class="blue">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" class="orange">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" class="pink">Section 3</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h4>Section 1</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                            malesuada ipsum. Nam commodo, est nec dictum bibendum.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h4>Section 2</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                            malesuada ipsum. Nam commodo, est nec dictum bibendum.
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h4>Section 3</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor urna lacus, ut viverra lorem mollis non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel
                            malesuada ipsum. Nam commodo, est nec dictum bibendum.
                        </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