"Vertical tabs - versión 2 [sin enlaces]"
Bootstrap 2.3.2 Snippet by victorgaldamezstarshot

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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-fluid" style="margin-top: 30px"> <div class="row-fluid"> <div id="myTabHolder" class="span10 offset1 tabbable tabs-left"> <ul class="nav nav-tabs"> <li class="active"> <p class="tabx" data-target="#lA" data-toggle="tab"> <!-- <a href="#lA" data-toggle="tab"> --> <span class="account-type">HSA</span><br/> <span class="account-amount">$587.00</span><br/> <!-- <span class="account-link">Investments</span> --> <a href="#" class="account-link">Investments</a> <!-- </a> --> </p > </li> <li class=""> <a href="#lB" data-toggle="tab"> <span class="account-type">FSA</span><br/> <span class="account-amount">$587.00</span><br/> <span class="account-link">Investments</span> </a> </li> <li class=""> <a href="#lC" data-toggle="tab"> <span class="account-type">HSAOD</span><br/> <!--<span class="account-amount">$587.00</span><br/>--> <!--<span class="account-link">Investments</span>--> </a> </li> <li class=""> <a href="#lD" data-toggle="tab"> <span class="account-type">DCAP</span><br/> <span class="account-amount">$587.00</span><br/> <span class="account-link">Investments</span> </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="lA"> <div> <p>HSA account selected.</p> </div> </div> <div class="tab-pane" id="lB"> <div> <p>FSA account selected.</p> </div> </div> <div class="tab-pane" id="lC"> <div> <p>HSAOD account selected.</p> </div> </div> <div class="tab-pane" id="lD"> <div> <p>DCAP account selected.</p> </div> </div> </div> </div> </div> </div>
/** Import ROBOTO font **/ @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900); body { font-family: 'Roboto', sans-serif; color: #B7C4CB; background-color: #F7F9F9; margin:0; padding:0; width: 100%; height: 100%; } body > div { margin-top: 10px; } .tabbable > .nav-tabs > li > p { border: solid 1px transparent; padding-top: 28px; padding-bottom: 0px; padding-left: 12px; padding-right: 12px; margin-right: -1px; } a, .account-link { color: #72B032; } .account-type { font-family: 'Roboto', sans-serif; color: #A0AEB6; font-size: 18px; font-weight: bold; line-height: 20px; } .account-amount { font-family: 'Roboto', sans-serif; color: #A0AEB6; font-size: 14px; line-height: 16px; } .account-link { font-family: 'Roboto', sans-serif; color: #72B032; font-size: 14px; line-height: 16px; cursor: pointer; } /* TABS */ .tabs-left > .nav-tabs{ margin-right:0px; padding: 0; height: 700px; /* Debe ser el mismo height que el que tenga .tab-content */ } /* CONTENIDO DE LOS TABS */ .tab-content { background-color: #FFFFFF; border:solid 1px #DCE1E5; border-left-style: none; height: 700px; /* Debe ser el mismo height que el que tenga .tabs-left > .nav-tabs */ padding-left: 50px; border-radius: 0px 4px 4px 4px; -moz-border-radius: 0px 4px 4px 4px; -webkit-border-radius: 0px 4px 4px 4px; -webkit-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05); box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.05); } .tab-content > div { margin-top: 26px; } /* Color de los enlaces de los tabs */ .tabs-left > .nav-tabs > a { color: #7FAD30; } /* Formato del primer elemento */ .tabs-left > .nav-tabs > li:nth-child(1) > a, .tabs-left > .nav-tabs > li:nth-child(1) > a:hover, .tabs-left > .nav-tabs > li:nth-child(1) > a:focus, .tabs-left > .nav-tabs > li:nth-child(1) > .tabx, .tabs-left > .nav-tabs > li:nth-child(1) > .tabx:hover, .tabs-left > .nav-tabs > li:nth-child(1) > .tabx:focus { border-top-left-radius: 4px; } /* Formato del tab activo */ .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus, .tabs-left > .nav-tabs .active .tabx, .tabs-left > .nav-tabs .active .tabx:hover, .tabs-left > .nav-tabs .active .tabx:focus { background-color: #FFFFFF; border-bottom: 1px solid #DCE1E5; border-left: 1px solid #DCE1E5; border-bottom-left-radius: 0px; border-right-style: none; margin-right: -1px; -webkit-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05); -moz-box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05); box-shadow: -4px 0px 18px -1px rgba(0,0,0,0.05); } /* Formato de los tabs en general */ .tabs-left > .nav-tabs > li > a, .tabs-left > .nav-tabs > li > .tabx { margin-bottom: 0; padding-bottom: 0; padding-top: 2em; min-height: 105px; min-width: 105px; border:solid 1px #DCE1E5; border-radius: 0px; }

Related: See More


Questions / Comments: