<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="side-tabs"> <div class="side-tabs-items col-md-3"> <button class="side-tabs-item active" data-tab="first"> First </button> <button class="side-tabs-item" data-tab="second"> Second </button> </div> <div class="col-md-9 side-tabs-panel"> <div class="side-tabs-tab active" data-tab="first"> <h3>First tab</h3> <hr/> </div> <div class="side-tabs-tab" data-tab="second"> <h3>Second tab</h3> <hr/> </div> </div> </div> </div> </div>

.row { height: 200px; padding-top: 10px; } .side-tabs{ border: 1px solid black; width: 100%; float: left; height: 100%; } .side-tabs-panel { border-left: 1px solid black; margin-left: 0; height: 100%; } .side-tabs-items { margin-right: 0; padding: 0; border-bottom: 1px solid black; } .side-tabs-items button { display: block; width: 100%; background: white; border: 0; border-bottom: 1px solid black; cursor: pointer; padding: 5px 10px; } .side-tabs-item.active { border-left: 5px solid green; } .side-tabs-items button:first-child { border-top: 0; } .side-tabs-items button:last-child { border-bottom: 0; } .side-tabs-items button:hover { background: ghostwhite; } .side-tabs-tab { height:100%; display: none; } .side-tabs-tab.active{ display: block; }

$('document').ready(function(){ $('body').on('click', '.side-tabs-item', function(e){ e.preventDefault(); var item = $(this); var sideTabs = item.closest('.side-tabs'); var tab = sideTabs.find('.side-tabs-tab[data-tab="'+ item.data('tab') +'"]'); sideTabs.find('.side-tabs-item').removeClass('active'); sideTabs.find('.side-tabs-tab').removeClass('active'); item.addClass('active'); tab.addClass('active'); }); });