"Vertical Tabs - Bootstrap 3 [Responsive] - versión 2"
Bootstrap 3.0.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="//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">
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
canvas{
overflow-x:auto;
}
.bottom-aligned {
display:flex;
align-items: flex-end;
height: 100%;
padding:0;
}
.balance-amounts-box > span:not(:last-child) {
border-right: solid 1px #dce1e5;
}
.balance-amounts-box > span {
display:inline-block;
padding-left:7px;
padding-right:7px;
}
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")
}
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
//Load the graph with experimental data
$(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','c4','c5','c6'],
datasets: [
{
backgroundColor:
['#313f4d','#54585a','#39af87','#379baf','#ff00ff','#00ff00','#ff0000'],
borderWidth: 0,
data: [84.60, 84.60, 160, 110,300,200,50]
}
]
};
var options = {
layout: {
padding: {
left: 0,
right: 0,
top: 30,
bottom: 0
}
},
isFixedWidth: false,
barWidth:1,
maintainAspectRatio:true,
legend: {
display: false
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

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

Questions / Comments: