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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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: {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO
Simple Vertical timeline
Tabs style 1
Bootstrap Tabs with Table

Questions / Comments: