<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!--****************tab left***********************--> <!--****************tab left***********************--> <!--****************tab left***********************--> <div class="tabbable tabs-left left-tab-process" style="margin-bottom:25px;"> <ul class="nav nav-tabs book-process-ltab text-center"> <li class="active"><a href="#a" data-toggle="tab">sgfg</a></li> <li class=""><a href="#b" data-toggle="tab">jhgjhjr</a></li> <li class=""><a href="#c" data-toggle="tab">asdsds</a></li> <li class=""><a href="#d" data-toggle="tab">hjghjt</a></li> <li class=""><a href="#e" data-toggle="tab">sadsafy</a></li> <li class=""><a href="#f" data-toggle="tab">Tohjfgo:</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a"> sdfgfdgfgdfg </div> <div class="tab-pane" id="b"> <div class=""> <h4>fdgfg:</h4> sfdgfsdgfdgsfg <p> fdgfg.</p> </div> </div> <div class="tab-pane" id="c"> <p> On bofdgmplfderviewd</p> <div class="tab-pane" id="d"> dfgfgfgfg </div> <div class="tab-pane" id="e"> dfgfdgfg </div> <div class="tab-pane" id="f"> dfgdfgfdgfdg </div> </div> </div> <!--****************end tab left***********************--> <!--****************end tab left***********************--> <!--****************end tab left***********************-->

/*================================================== * left tab * ===============================================*/ body{ padding:25px;} .tabs-left > .nav-tabs { float: left; margin-right: 19px; border: none; } .tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs { border-bottom: 0; } .tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; background-color: #536779; border-radius:0px; color: white; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #ddd transparent #ddd #ddd; background-color: #fff; color: dimgrey; border:none; } .left-tab-process .tab-content{ background-color:#fff; margin-left: 131px;} .tab-content > .active, .pill-content > .active { display: block; } .book-process-ltab{ max-width:131px;} .left-tab-process .tab-pane{ padding: 13px 11px; min-height: 442px; } .left-tab-process h4{ color:#536779;} .term-fa{ margin-right: 7px; font-size: 11px; margin-left: -18px; color: #2EA72F;} .tac-content{ background-color:#ccc;} /*================================================== * left tab * ===============================================*/ /*================================================== * left tab * ===============================================*/ @media (max-width:768px){ .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { width: 95px; margin-right: 0; padding: 5px 8px; font-size: 12px; margin-bottom: 3px; background-color: #536779; border-radius: 0px; color: white; } .left-tab-process .tab-pane { padding: 13px 11px; min-height: 335px; } .left-tab-process .tab-content { background-color: #F1F1F1; margin-left: 95px; } } /*================================================== * left tab * ===============================================