"Vertical Tabs - Bootstrap 3"
Bootstrap 3.3.0 Snippet by victorgaldamezstarshot

<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 ----------> <div class="container" style="margin-top: 30px"> <div class="row"> <div id="MyAccountsTab" class="tabbable tabs-left"> <ul class="nav nav-tabs col-md-1"> <li class="active"> <div data-target="#lA" data-toggle="tab"> <div> <span class="account-type">HSA</span><br/> <span class="account-amount">$587.00</span><br/> <a href="#" class="account-link">Investments</a> </div> </div> </li> <li> <div data-target="#lB" data-toggle="tab"> <div> <span class="account-type">FSA</span><br/> <span class="account-amount">$120,00</span><br/> <a href="#" class="account-link">Investments</a> </div> </div> </li> <li> <div data-target="#lC" data-toggle="tab"> <div> <span class="account-type">HSAOD</span><br/> <span class="account-amount">$350,00</span><br/> <!-- <span class="account-amount">$587.00</span><br/> <a href="#" class="account-link">Investments</a>--> </div> </div> </li> <li> <div data-target="#lD" data-toggle="tab"> <div> <span class="account-type">DCAP</span><br/> <span class="account-amount">$2.300,00</span><br/> <a href="#" class="account-link">Investments</a> </div> </div> </li> </ul> <div class="tab-content col-md-11"> <div class="tab-pane active" id="lA" style="padding-left: 60px; padding-right:100px"> <div> <div class="row" style="line-height: 14px; border-bottom: solid 1px #DCE1E5; padding-bottom:34.5px; margin-bottom: 34.5px"> <div class="col-md-6"> <div class="col-md-5" style="padding: 0"> <div class="title"> <span>BALANCE</span> </div> <div> <a href="#" class="balance">$587.50</a> </div> </div> <div class="col-md-7" style="float: none; display: table-cell; vertical-align: bottom; height: 50px; padding-top: 24px"> <div class="col-md-8" style="padding-left:0px; padding-right: 0px"> <a href="#" style="line-height: 18px; font-size:14px">Investments</a> <a href="#" style="line-height: 18px; font-size:14px">Contributions YTD</a> </div> <div class="col-md-4"> <span style="line-height: 18px; font-size:14px">$0.0</span> <span style="line-height: 18px; font-size:14px">$786.00</span> </div> <div class="clear-fix"></div> </div> </div> <div class="col-md-6"> <div class="title"> <span>WHAT WOULD YOU LIKE TO DO?</span> </div> <div class="dropdown"> <button id="actionsDrop" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width:100%"> More actions... <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="actionsDrop"> <li><a href="#">Manage HSA Contributions</a></li> <li><a href="#">Manage HSAOD Activity</a></li> <li><a href="#">Go to HSA Save-it!</a></li> <li><a href="#">View All Claims</a></li> <li><a href="#">View Statements</a></li> <!--<li role="separator" class="divider"></li>--> </ul> </div> </div> <div class="clearfix"></div> </div> <div class="row"> <div class="col-md-6" > <div class="title"> <span>EXPENSE SUMMARY</span> </div> <div class="col-md-12 top-rounded"> <div class="col-md-7" style="padding-top:15px; padding-left:3px"> <div class="title"> <span>TOTAL EXPENSE</span> </div> <div class="clear-fix"></div> <div style="margin-bottom: 10px; margin-top: -5px;font-size: 18px; font-weight: bold; line-height:18px"> <span>$458.40</span> </div> </div> <div class="col-md-5" style="padding-top:15px"> <div class="dropdown"> <button id="monthsDrop" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="width:100%"> September <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="monthsDrop"> <li><a href="#">January</a></li> <li><a href="#">February</a></li> <li><a href="#">March</a></li> <li><a href="#">April</a></li> <li><a href="#">May</a></li> <li><a href="#">June</a></li> <li><a href="#">July</a></li> <li><a href="#">August</a></li> <li><a href="#">September</a></li> <li><a href="#">October</a></li> <li><a href="#">November</a></li> <li><a href="#">Dicember</a></li> </ul> </div> <!-- <select class="form-control"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9" selected>September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select>--> </div> <div class="clear-fix"></div> </div> <div class="col-md-12 bottom-rounded"> <canvas id="chart" style="width:400px;height:300px"></canvas> </div> </div> <div class="col-md-6"> <div> <div class="title"> <span >MY PAYMENT CARD</span> </div> <div class="col-md-12 rounded" style="height:5em"> <span>TODO</span> <div class="clear-fix"></div> </div> </div> <div style="height:154px"> <div class="clear-fix"></div> <div class="title"> <span>ADVICE</span> </div> <div class="col-md-12 rounded" style="height:17em"> <span>TODO</span> <div class="clear-fix"></div> </div> </div> </div> <div class="clear-fix"></div> </div> </div> <div class="clear-fix"></div> <div class="row"> <div class="col-md-12"> <div class="title"> <span>RECENT ACTIVITY</span> </div> <div class="col-md-12 top-rounded" style="font-weight: bold; text-align: center; padding-bottom: 15px"> <br/> TODO - Recent activity datagrid - TODO <br/> </div> </div> </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> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
/* ROBOTO FONT FACES - I */ /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } /* ROBOTO FONT FACES - F */ /** General HTML style - I */ /*@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; } a { /*font-size: 0.9em;*/ color: #72B032; /*color: #86BB4F;*/ } a, a:hover, a:focus, a:visited { text-decoration: none; } /** General HTML style - F */ canvas { margin-bottom: 15px; } /*#monthDrop*/ .dropdown button .btn-default { width:100%; border-color: red; } .balance { line-height: 36px; font-size:36px } .title { color: #a0aeb6; line-height: 14px; font-size:14px; margin-bottom: 10px; } /** Rounded divs - I */ div.rounded, div.top-rounded, div.bottom-rounded { border: solid 1px #dce1e5; } div.rounded { margin-bottom: 30px; -webkit-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; } div.top-rounded { -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } div.bottom-rounded { border-top-style: none; -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; } /** Rounded divs - F */ /** Dropdown draft - I */ .dropdown span.caret { float:right; margin-top:8px; } .dropdown button { text-align: left; } .dropdown-menu { width: 100%; } /** Dropdown draft - F */ /** Let tabls-left class be available in bootstrap 3.3.7 - I **/ .tabs-left > .nav-tabs { border-bottom: 0; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .tabs-left > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a, .tabs-left > .nav-tabs > li > div { margin-right: 0; margin-bottom: 3px; } .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } .tabs-left > .nav-tabs > li > a, .tabs-left > .nav-tabs > li > div { 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:hover, .tabs-left > .nav-tabs > li > a:focus, .tabs-left > .nav-tabs > li > div:hover, .tabs-left > .nav-tabs > li > div:focus{ border-color: #eeeeee #dddddd #eeeeee #eeeeee; background-color: #eeeeee; } .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 > div, .tabs-left > .nav-tabs .active > div:hover, .tabs-left > .nav-tabs .active > div:focus{ border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; } /** Let tabls-left class be available in bootstrap 3.3.7 - F **/ .account-type { font-family: 'Roboto', sans-serif; color: #A0AEB6; font-size: 18px; font-weight: bold; line-height: 18px; } .account-amount { font-family: 'Roboto', sans-serif; color: #A0AEB6; font-size: 14px; line-height: 16px; } /* 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; } /* 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 div, .tabs-left > .nav-tabs .active div:hover, .tabs-left > .nav-tabs .active div:focus { background-color: #FFFFFF; border-bottom-style: none; border-left-style: none; /*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: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) > div, .tabs-left > .nav-tabs > li:nth-child(1) > div:hover, .tabs-left > .nav-tabs > li:nth-child(1) > div:focus { cursor: pointer; border-top-left-radius: 4px; } .tabs-left > .nav-tabs > li.active:nth-child(1) > a, .tabs-left > .nav-tabs > li.active:nth-child(1) > a:hover, .tabs-left > .nav-tabs > li.active:nth-child(1) > a:focus, .tabs-left > .nav-tabs > li.active:nth-child(1) > div, .tabs-left > .nav-tabs > li.active:nth-child(1) > div:hover, .tabs-left > .nav-tabs > li.active:nth-child(1) > div:focus { border-top-left-radius: 4px; border-bottom-style: none; border-left: 1px solid #DCE1E5; } .tabs-left > .nav-tabs > li > a, .tabs-left > .nav-tabs > li > div { display: table; /*border: solid 1px transparent;*/ margin-right: -1px; margin-bottom: 0; padding-bottom: 0; height: 105px; border:solid 1px #DCE1E5; border-radius: 0px; } /* Style of the div element acting as tab content */ .tabbable.tabs-left > .nav-tabs > li > div > div { display: table-cell; vertical-align: middle; padding: 0px 12px 0px 12px; min-width: 105px; max-width: 105px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
$(document).ready(function(){ var canvas = $("#chart").get(0); var ctx = canvas.getContext('2d'); // Global Options: //Chart.defaults.global.defaultFontColor = '#a0aeb6'; //Chart.defaults.global.defaultFontSize = 12; // Data with datasets options var data = { labels: ["Eyecare", "Medical", "Dentist", "Rx"], datasets: [ { backgroundColor: ['#313f4d','#54585a','#39af87','#379baf'], borderWidth: 0, data: [84.60, 84.60, 160, 110] } ] }; var options = { layout: { padding: { left: 0, right: 0, top: 30, bottom: 0 } }, isFixedWidth:true, barWidth:1, legend: { display: false }, tooltips: { mode: 'index', callbacks: { label: function(tooltipItem) { return "$" + Number(tooltipItem.yLabel).toFixed(2); }, labelTextColor:function(tooltipItem, chart){ return '#000000'; }/*, titleTextColor:function(tooltipItem, chart){ return '#000000'; }*/ }, backgroundColor: '#ffffff', borderColor: '#a0aeb6', borderWidth: 1, bodySpacing: 0, cornerRadius: 2, displayColors: false, titleMarginTop: 20, titleMarginBottom: 0, titleFontSize: 0, titleFontColor: '#000000', caretSize: 4, xAlign: 'center', yAlign: 'bottom', xPadding: 12, yPadding: 12, }, title: { display: false, text: 'Graph title', position: 'bottom' }, scales: { xAxes: [ { barThickness : 35, gridLines: { display: false }, ticks: { fontSize: "12", fontColor: "#000000", } } ], yAxes: [ { gridLines: { drawBorder: false, color: "#dce1e5", borderDash: [4, 3], borderDashOffset: 3 }, ticks: { beginAtZero:true, fontColor: "#a0aeb6", fontSize: "12", callback: function (value) { return "$"+Number(value) }, stepSize: 25 } }] }, responsive: true }; // Chart declaration: var barChart = new Chart(ctx, { type: 'bar', data: data, options: options }); });

Related: See More


Questions / Comments: