"Dashboard Boxes"
Bootstrap 3.0.1 Snippet by evargas

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.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/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">
<div class="row">
<div class="col-md-4">
<div class="dash-box dash-box-color-1">
<div class="dash-box-icon">
<i class="glyphicon glyphicon-cloud"></i>
</div>
<div class="dash-box-body">
<span class="dash-box-count">25</span>
<span class="dash-box-title">Cantidad de Contratos suscritos por mes</span>
</div>
<div class="dash-box-action">
<button>More Info</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="dash-box dash-box-color-2">
<div class="dash-box-icon">
<i class="glyphicon glyphicon-download"></i>
</div>
<div class="dash-box-body">
<span class="dash-box-count">100</span>
<span class="dash-box-title">Learning Resources</span>
</div>
<div class="dash-box-action">
<button>More Info</button>
</div>
</div>
</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
.dash-box {
position: relative;
background: rgb(255, 86, 65);
background: -moz-linear-gradient(top, rgba(255, 86, 65, 1) 0%, rgba(253, 50, 97, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 86, 65, 1) 0%, rgba(253, 50, 97, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 86, 65, 1) 0%, rgba(253, 50, 97, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff5641', endColorstr='#fd3261', GradientType=0);
border-radius: 4px;
text-align: center;
margin: 60px 0 50px;
}
.dash-box-icon {
position: absolute;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.dash-box-action {
transform: translateY(-50%) translateX(-50%);
position: absolute;
left: 50%;
}
.dash-box-body {
padding: 50px 20px;
}
.dash-box-icon:after {
width: 60px;
height: 60px;
position: absolute;
background: rgba(247, 148, 137, 0.91);
content: '';
border-radius: 50%;
left: -10px;
top: -10px;
z-index: -1;
}
.dash-box-icon > i {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
Flat Responsive Dashboard Design
Status Boxes

Questions / Comments: