Bootstrap Responsive Vertical Tabs with Icons

Bootstrap Responsive Vertical Tabs with Icons
Code Snippet: Bootstrap Vertical Tabs
Author: Josh Adamous
Official website: Go to website
Published: 1 month ago
Views: 401

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.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


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