"Vertical Tabs - Bootstrap 3 [Responsive]"
Bootstrap 3.0.0 Snippet by victorgaldamezstarshot

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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"> <!-- style="overflow:hidden" --> <nav id="mainNav" class="hidden navbar navbar-default navbar-fixed-top navbar-custom affix-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <!-- <img class="navbar-brand" src="#"/> --> <a class="navbar-brand" href="#page-top">Connect Your Care</a> </div> <!-- Menu options --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden active"> <a href="#page-top"></a> </li> <li class="page-scroll"> <a href="#">Option 1</a> </li> <li class="page-scroll"> <a href="#">Option 2</a> </li> <li class="page-scroll"> <a href="#">Option 3</a> </li> </ul> </div> </div> </nav> <div class="row"> <div class="col-xs-12 visible-xs"> <!-- Account selection for mobile - I --> <div class="dropdown"> <button id="actionsDrop" class="btn btn-default dropdown-toggle col-xs-12" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> HSA - $587.50 <span class="caret"></span> <i class="down-arrow pull-right"></i> </button> <ul class="dropdown-menu" aria-labelledby="actionsDrop"> <li class="selected"><a href="#">HSA - $587.50</a></li> <li><a href="#">FSA - $120.00</a></li> <li><a href="#">HSAOD - $350.00</a></li> <li><a href="#">DCAP - $2300,00</a></li> </ul> </div> <!-- Account selection for mobile - F --> </div> </div> <div class="clearfix"></div> <div class="row"> <div class="col-md-12" style="overflow:auto"> <div id="MyAccountsTab" class="tabbable tabs-left"> <!-- Account selection for desktop - I --> <ul class="nav nav-tabs col-md-1 hidden-xs"> <li class="active"> <div data-target="#lA" data-toggle="tab"> <div class="ellipsis"> <span class="account-type">HSA</span><br/> <span class="account-amount">$587.00</span><br/> <a href="https://www.htic.es" 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/> </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/> </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 class="col-md-offset-1"> <div class="row" style="line-height: 14px; margin-bottom: 34.5px"> <div class="col-md-6" style="height: 65px"> <div class="col-xs-5" style="display: table; height: 100%; padding:0px"> <div class="col-xs-12" style="display: table-cell; vertical-align: bottom; height: 100%"> <div class="row"> <div class="title"> <span>BALANCE</span> </div> <div> <a href="#" class="balance">$587.50</a> </div> </div> </div> </div> <div class="col-xs-6 col-xs-offset-1" style="display: table; height: 100%; padding:0px"> <div class="col-xs-12" style="display: table-cell; vertical-align: bottom"> <div class="row" style="padding-left: 0"> <div class="col-xs-9 ellipsis" style="padding-right:0px"> <a href="#" style="line-height: 18px; font-size:12px">Investments</a> </div> <div class="col-xs-3 text-left" style="padding-left:0px"> <span style="line-height: 18px; font-size:14px">$0.0</span> </div> </div> <div class="row"> <div class="col-xs-9 ellipsis" style="padding-right:0px"> <a href="#" style="line-height: 18px; font-size:12px">Contributions YTD</a> </div> <div class="col-xs-3 text-left" style="padding-left:0px"> <span style="line-height: 18px; font-size:14px">$786.00</span> </div> </div> </div> </div> </div> <div class="clearfix visible-xs"></div> <div class="col-md-6 col-xs-12 mt-20" style="height: 65px"> <div class="col-xs-12" style="display: table; height: 100%; padding: 0px"> <div style="display: table-cell; vertical-align: bottom; height: 100%"> <div class="row"> <div class="col-xs-12 title"> <span>WHAT WOULD YOU LIKE TO DO?</span> </div> <div class="col-xs-12"> <div class="dropdown"> <button id="actionsDrop" class="btn btn-default dropdown-toggle col-xs-12" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> More actions... <span class="caret"></span> <i class="down-arrow pull-right"></i> </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 Statements</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <hr/> <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-xs-6" 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-xs-6" style="padding-top:15px; padding-left:0px; padding-right:0px"> <div class="dropdown"> <button id="monthsDrop" style="border-style:none; width: 100%" 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> <i class="down-arrow pull-right"></i> </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="clearfix"></div> </div> <div class="col-md-12 bottom-rounded"> <canvas id="chart" style="width:400px;height:300px"></canvas> </div> </div> <div class="clearfix visible-xs"></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> <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> <div class="clearfix hidden-xs" style="margin-top: 15px"></div> <div class="row"> <div class="col-md-12"> <div class="title"> <span>RECENT ACTIVITY</span> </div> <div class="col-md-12 rounded"> TODO - Recent activity datagrid - TODO </div> </div> </div> </div> </div> <div class="tab-pane" id="lB"> <div class="col-md-offset-1"> <div class="row" style="line-height: 14px; margin-bottom: 34.5px"> <p>FSA account selected.</p> </div> </div> </div> <div class="tab-pane" id="lC"> <div class="col-md-offset-1"> <div class="row" style="line-height: 14px; margin-bottom: 34.5px"> <p>HSAOD account selected.</p> </div> </div> </div> <div class="tab-pane" id="lD"> <div class="col-md-offset-1"> <div class="row" style="line-height: 14px; margin-bottom: 34.5px"> <p>DCAP account selected.</p> </div> </div> </div> </div> <!-- Account selection for desktop - F --> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
div { /*box-sizing: border-box;*/ outline-color: #ade3ff; outline-style: none; } /* Dropdowns - I */ .dropdown .dropdown-toggle .down-arrow { display: inline-block; margin-top: 6px; margin-left:5px; width: 16px; height: 9px; background-image: url("http://www.htic.es/assets/down-arrow.png") } .dropdown .dropdown-toggle .caret { display: none; } .dropdown.open .down-arrow { behavior:url(-ms-transform.htc); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); transform: rotate(-180deg); } .dropdown button, .dropdown-menu { background-color: #f6f8f8; } .dropdown-menu { margin-top: 0px; background-color: #f6f8f8; border-radius: 0 0 0 0; } .dropdown-menu > li > a:hover { background-color: #96a4ad; } /* Dropdowns - F */ div.clearfix { margin-top: 15px; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .margin-top-15 { margin-top: 15px; } /* 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; } container { padding-bottom: 15px; } /*#monthDrop*/ .dropdown button .btn-default { width:100%; border-color: red; } .balance { line-height: 1em; font-size:2.5em } .title { color: #a0aeb6; font-size: 1em; margin-bottom: 10px; } /** Rounded divs - I */ div.rounded, div.top-rounded, div.bottom-rounded { border: solid 1px #dce1e5; } div.rounded { margin-bottom: 20px; -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: 1.3em; font-weight: bold; line-height: 18px; } .account-amount { font-family: 'Roboto', sans-serif; color: #A0AEB6; font-size: 1.1em; line-height: 16px; } .account-link { font-family: 'Roboto', sans-serif; font-size: 0.85em; /*line-height: 1em;*/ } /* TABS */ .tabs-left > .nav-tabs{ margin-right:0px; padding: 0; height: 100%; /* 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: 100%; margin-bottom: 15px; min-height: 700px; 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:block;*/ /*display: table;*/ /*border: solid 1px transparent;*/ margin-right: -1px; margin-bottom: -1px; 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:block; width: 100%; padding: 1em; min-height: 6em; } /** For elements on the same line that jump down - I */ @media (max-width: 767px) { .mt-20 { margin-top:20px; } .tab-content { border-left-style: solid; border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; } } /** For elements on the same line that jump down - F */
//Load the graph with experimental data $(document).ready(function(){ $('.account-link').on('click', function(e){ if($(this).parents('li').hasClass('active')) { e.stopPropagation(); } }); 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: