Here’s how to create Bootstrap Vertical Tabs Code With Example. This tutorial will guide you through the process of implementing vertical tabs using Bootstrap, complete with HTML, CSS, and JavaScript code snippets.
Adding Bootstrap and Font Awesome
This section includes the necessary CSS stylesheets for Bootstrap and Font Awesome to ensure the vertical tabs render correctly.
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/font-awesome.css'>
Creating the HTML Structure
This is where you’ll define the HTML markup for the vertical tabs. It involves creating a container, rows, columns, and the tab structure itself, including the navigation list and tab content panes.
<div class="container"> <div class="row"> <div class="col-sm-12"> <h2>Website & Software Development</h2> <div class="tab-container"> <ul class="nav nav-tabs nav-tabs-left nav-centered" role="tablist"> <li role="presentation" class="active"> <a href="#web-dev" data-toggle="tab" role="tab"> Website Development </a> </li> <li role="presentation"> <a href="#graphic" data-toggle="tab" role="tab"> Graphic Design </a> </li> <li role="presentation"> <a href="#marketing" data-toggle="tab" role="tab"> Online Marketing </a> </li> <li role="presentation"> <a href="#business" data-toggle="tab" role="tab"> Business Solutions </a> </li> </ul> <div id="my_side_tabs" class="tab-content side-tabs side-tabs-left"> <div class="tab-pane fade in active" id="web-dev" role="tabpanel"> <div class="col-sm-6"> <h3>Custom Web Design</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Responsive</li> <li>Search Engine Optimization (SEO)</li> <li>W3C Compliant</li> <li>Custom CMS</li> <li>Hosting</li> <li>Webmaster Services</li> <li>Content Writing</li> </ul> </div> <div class="col-sm-6"> <h3>eCommerce</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Shopify</li> <li>WordPress</li> <li>Paypal</li> </ul> </div> <div class="col-sm-6"> </div> </div> <div class="tab-pane fade" id="graphic" role="tabpanel"> <div class="col-sm-6"> <h3>UI/UX Designs</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Smartphone & Tablet UI</li> <li>Responsive Website UI</li> </ul> </div> <div class="col-sm-6"> <h3>Logos</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> <div class="tab-pane fade" id="marketing" role="tabpanel"> <div class="col-sm-6"> <h3>Online Advertising</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Facebook</li> <li>Google AdWords</li> <li>YouTube Ads</li> <li>Custom Ads</li> </ul> </div> <div class="col-sm-6"> <h3>Social Media</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Blogging</li> <li>Facebook</li> <li>Twitter</li> <li>LinkedIn</li> <li>Instagram</li> <li>Pinterest</li> </ul> </div> <div class="col-sm-6"> <h3>Fundraising</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> <div class="tab-pane fade" id="business" role="tabpanel"> <div class="col-sm-6"> <h3>Consulting</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <ul> <li>Company Branding</li> <li>Website Security</li> <li>Computer IT & Repair</li> <li>Data Storage</li> </ul> </div> <div class="col-sm-6"> <h3>Analytics & Reporting</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> </div> </div> </div> </div>
Styling the Vertical Tabs with CSS
Here, you’ll find the CSS styles that will customize the appearance of the vertical tabs, including the background color, border, and hover effects.
.tab-container {
background: #344152;
padding: 0;
border: solid 1px #444;
height: 440px;
overflow: hidden;
width: 100%;
}
.nav-tabs.nav-tabs-left {
float: left;
border-right: 0;
}
.nav-tabs.nav-tabs-left li a {
margin-right: 0;
border-radius: 0;
border-right: none;
}
.nav-tabs.nav-tabs-left {
border-bottom: 0;
max-width: 33%;
}
.nav-tabs.nav-tabs-left li {
float: none;
margin: 0;
text-align: left;
}
.nav-tabs.nav-tabs-left li a,
.nav-tabs.nav-tabs-right li a {
background-color: #344152;
color: #fff;
}
.nav-tabs.nav-tabs-left li a:hover,
.nav-tabs.nav-tabs-right li a:hover {
background-color: rgba(255,255,255,0.9);
border-color: rgba(255,255,255,0.9);
color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active .glyphicon,
.nav-tabs.nav-tabs-right li.active .glyphicon {
color: #333;
}
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active .glyphicon:hover,
.nav-tabs.nav-tabs-right li.active .glyphicon:hover {
color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active a:focus,
.nav-tabs.nav-tabs-right li.active a:focus {
background-color: #fff;
}
.nav-tabs.nav-tabs-left li:not(:last-of-type),
.nav-tabs.nav-tabs-right li:not(:last-of-type) {
margin-bottom: -1px;
}
.tab-content {
background: #fff;
height: 440px;
overflow-y: scroll;
}
.tab-content.side-tabs .tab-pane {
display: none;
padding: 20px;
overflow-y: auto;
}
.tab-content.side-tabs-left {
margin-left: 45px;
}
.tab-content.side-tabs-left .tab-pane {
border-radius: 0;
}
.tab-content.side-tabs-left .tab-pane.active {
display: block;
background-color: #fff;
border-color: #fff;
color: #333;
font-weight: 300;
letter-spacing: 0.1em;
}
.tab-content.side-tabs-right {
margin-right: 45px;
}
.tab-content.side-tabs-right .tab-pane {
border-radius: 4px 0 0 4px;
}
main > .row:not(:first-of-type) {
margin-top: 1.1em;
}
col.time,
col.repname {
width: 12em;
}
col.did {
width: 9em;
}
.nav-tabs>li>a,.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
border: none;
}
Implementing JavaScript Functionality
This section will provide the JavaScript code to handle the tab switching and adjust the height of the tab content panes to match the height of the navigation.
(function () {
'use strict';
var sideTabsPaneHeight = function() {
var navHeight = $('.nav-tabs.nav-tabs-left').outerHeight() || $('.nav-tabs.nav-tabs-right').outerHeight() || 0;
var paneHeight = 0;
$('.tab-content.side-tabs .tab-pane').each(function(idx) {
paneHeight = $(this).outerHeight() > paneHeight ? $(this).outerHeight() : paneHeight;
});
$('.tab-content.side-tabs .tab-pane').each(function(idx) {
$(this).css('min-height', navHeight + 'px');
});
};
$(function() {
sideTabsPaneHeight();
$( window ).resize(function() {
sideTabsPaneHeight();
});
$( '.nav-tabs.nav-tabs-left' ).resize(function() {
sideTabsPaneHeight();
});
});
}());
By following these steps, you have successfully created Bootstrap Vertical Tabs with an example. If you have any further questions or suggestions, feel free to ask.
