Bootstrap Responsive Vertical Tabs with Icons

Bootstrap Responsive Vertical Tabs with Icons
Code Snippet:Bootstrap Vertical Tabs
Author: Josh Adamous
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 10,905
License: MIT
Edit Code online: View on CodePen
Read More

The “Bootstrap Vertical Tabs” is lightweight code snippet that helps you create minimal tabs panel with icons. Users can easily switch between tab contents by clicking the relevant icon. The Glyphicons are used in this vertical tabs project. So, you don’t need any other icons library to include.

How to Create Vertical Tabs using Bootstrap

1. Load the Bootstrap CSS, JS, and jQuery file into your webpage in order to get started with vertical tabs.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

2. After loading the Bootstrap framework, create HTML structure for vertical tabs as follows:

<div class="container">
   <div class="row">
      <div class="col-md-4 col-sm-5">
         <div class="tabs-left">
            <ul class="nav nav-tabs">
               <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
               <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
               <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
               <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
               <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
               <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
            </ul>
            <div class="tab-content">
               <div class="tab-pane active" id="a">
                  <h3>Who do you Love?</h3>
                  <ul class="list-group pull-left">
                     <li class="list-group-item">
                        <h4>Jen    <span class="badge pull-right">100%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>Dezi    <span class="badge pull-right">100%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>Eli    <span class="badge pull-right">100%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>Mojo    <span class="badge pull-right">83%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>Myself    <span class="badge pull-right">100%</span></h4>
                     </li>
                  </ul>
               </div>
               <div class="tab-pane" id="b">
                  <h3>What's your Favorite?</h3>
                  <ul class="list-group pull-left">
                     <li class="list-group-item">
                        <h4>Crystals    <span class="badge pull-right">100%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>Healing    <span class="badge pull-right">90%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>Exploring    <span class="badge pull-right">78%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>QiGong    <span class="badge pull-right">83%</span></h4>
                     </li>
                     <li class="list-group-item">
                        <h4>Myself    <span class="badge pull-right">100%</span>
                        </h4>
                     </li>
                  </ul>
               </div>
               <div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
               <div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
               <div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
               <div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
            </div>
            <!-- /tab-content -->
         </div>
         <!-- /tabbable -->
      </div>
      <!-- /col -->
   </div>
   <!-- /row -->
</div>
<!-- /container -->

3. Now, style the vertical tabs with the following CSS.

.badge {
	background-color: #777;
}

.tabs-left {
	margin-top: 3rem;
}

.nav-tabs {
	float: left;
	border-bottom: 0;
}

.nav-tabs li {
	float: none;
	margin: 0;
}

.nav-tabs li a {
	margin-right: 0;
	border: 0;
	border-radius: 0;
	background-color: #333;
}

.nav-tabs li a:hover {
	background-color: #444;
}

.nav-tabs .glyphicon {
	color: #fff;
}

.nav-tabs .active .glyphicon {
	color: #333;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
	border: 0;
}

.tab-content {
	margin-left: 45px;
}

.tab-content .tab-pane {
	display: none;
	background-color: #fff;
	padding: 1.6rem;
	overflow-y: auto;
}

.tab-content .active {
	display: block;
}

.list-group {
	width: 100%;
}

.list-group .list-group-item {
	height: 50px;
}

.list-group .list-group-item h4,
.list-group .list-group-item span {
	line-height: 11px;
}

4. Finally, initialize the tabs with the following JavaScript function.

var tabsFn = (function() {
  
  function init() {
    setHeight();
  }
  
  function setHeight() {
    var $tabPane = $('.tab-pane'),
        tabsHeight = $('.nav-tabs').height();
    
    $tabPane.css({
      height: tabsHeight
    });
  }
    
  $(init);
})();

You’ve all done! I hope now you are able to build Bootstrap vertical tabs with icons. If you need any further help, let me know by comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...