content logo

Bootstrap Tabs:

Bootstrap Tabs with Height Change on Hover

All professional websites always use some tabs that fit their theme. So, if you have a website and like to apply a beautiful tab, look at its design at the first level. It would help if you chose a bootstrap that has harmony with your website color. You can see the Bootstrap Tabs with Height Change on Hover in this post with an attractive design. These Free Bootstrap Tabs help you classify all information into different sections and make your website more regular.

By looking at the CSS Tabs Height, you understand that the following code contains four sections with icons. The main theme of these tabs is blue, and the writings are white. You see a white background for the detailed part. When you place the cursor of the mouse on a part, it changes to green in this Simple Tabs Code. After selecting a specific item, this color turns to white, but still, there is a green line at the top of the section. The height of the selected part in the Green Tabs Code will increase and differ from other sections. The Bootstrap Tabs Height is available here for you to download and use on your website.

#

Free Bootstrap Tabs

#

Green Tabs Code

#

CSS Tabs Height

#

Simple Tabs Code

#

Bootstrap Tabs Height

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <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"><i class="fa fa-user"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-envelope"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-cube"></i>Section 3</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section4" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comment"></i>Section 4</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 role="tabpanel" class="tab-pane fade" id="Section4">
                        <h3>Section-4</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;
}
.tab {
    margin-top: 30px;
}
.tab .nav-tabs {
    border: none;
    border-bottom: 1px solid #e4e4e4;
}
.nav-tabs li a {
    padding: 15px 40px;
    border: 1px solid #ededed;
    border-top: 2px solid #ededed;
    border-right: 0px none;
    background: #7a81f4;
    color: #fff;
    border-radius: 0px;
    margin-right: 0px;
    font-weight: bold;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs li a:hover {
    border-bottom-color: #ededed;
    border-right: 0px none;
    background: #00b0ad;
    color: #fff;
}
.nav-tabs li a i {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}
.nav-tabs li:last-child {
    border-right: 1px solid #ededed;
}
.nav-tabs li.active a,
.nav-tabs li.active a:focus,
.nav-tabs li.active a:hover {
    border-top: 3px solid #00b0ad;
    border-right: 1px solid #d3d3d3;
    margin-top: -15px;
    color: #444;
    padding: 22px 40px;
}
.tab .tab-content {
    padding: 20px;
    line-height: 22px;
    box-shadow: 0px 1px 0px #808080;
}
.tab .tab-content h3 {
    margin-top: 0;
}
@media only screen and (max-width: 767px) {
    .nav-tabs li {
        width: 100%;
        margin-bottom: 10px;
    }
    .nav-tabs li a {
        padding: 15px;
    }
    .nav-tabs li.active a,
    .nav-tabs li.active a:focus,
    .nav-tabs li.active a:hover {
        padding: 15px;
        margin-top: 0;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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;
}
.tab {
    margin-top: 30px;
}
.tab .nav-tabs {
    border: none;
    border-bottom: 1px solid #e4e4e4;
}
.nav-tabs li a {
    padding: 15px 40px;
    border: 1px solid #ededed;
    border-top: 2px solid #ededed;
    border-right: 0px none;
    background: #7a81f4;
    color: #fff;
    border-radius: 0px;
    margin-right: 0px;
    font-weight: bold;
    transition: all 0.3s ease-in 0s;
}
.nav-tabs li a:hover {
    border-bottom-color: #ededed;
    border-right: 0px none;
    background: #00b0ad;
    color: #fff;
}
.nav-tabs li a i {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}
.nav-tabs li:last-child {
    border-right: 1px solid #ededed;
}
.nav-tabs li.active a,
.nav-tabs li.active a:focus,
.nav-tabs li.active a:hover {
    border-top: 3px solid #00b0ad;
    border-right: 1px solid #d3d3d3;
    margin-top: -15px;
    color: #444;
    padding: 22px 40px;
}
.tab .tab-content {
    padding: 20px;
    line-height: 22px;
    box-shadow: 0px 1px 0px #808080;
}
.tab .tab-content h3 {
    margin-top: 0;
}
@media only screen and (max-width: 767px) {
    .nav-tabs li {
        width: 100%;
        margin-bottom: 10px;
    }
    .nav-tabs li a {
        padding: 15px;
    }
    .nav-tabs li.active a,
    .nav-tabs li.active a:focus,
    .nav-tabs li.active a:hover {
        padding: 15px;
        margin-top: 0;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <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"><i class="fa fa-user"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-envelope"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-cube"></i>Section 3</a>
                    </li>
                    <li role="presentation">
                        <a href="#Section4" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comment"></i>Section 4</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 role="tabpanel" class="tab-pane fade" id="Section4">
                        <h3>Section-4</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