"Dashboard Boxes"
Bootstrap 3.0.0 Snippet by sainisagar310

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 ---------->
<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">
<div class="row">
<div class="col-md-4">
<div class="dbox dbox--color-1">
<div class="dbox__icon">
<i class="glyphicon glyphicon-cloud"></i>
</div>
<div class="dbox__body">
<span class="dbox__count">8,252</span>
<span class="dbox__title">Lesson Plan</span>
</div>
<div class="dbox__action">
<button class="dbox__action__btn">More Info</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="dbox dbox--color-2">
<div class="dbox__icon">
<i class="glyphicon glyphicon-download"></i>
</div>
<div class="dbox__body">
<span class="dbox__count">100</span>
<span class="dbox__title">Learning Resources</span>
</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
.dbox {
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;
}
.dbox__icon {
position: absolute;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.dbox__icon:before {
width: 75px;
height: 75px;
position: absolute;
background: #fda299;
background: rgba(253, 162, 153, 0.34);
content: '';
border-radius: 50%;
left: -17px;
top: -17px;
z-index: -2;
}
.dbox__icon:after {
width: 60px;
height: 60px;
position: absolute;
background: #f79489;
background: rgba(247, 148, 137, 0.91);
content: '';
border-radius: 50%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons
Flat Responsive Dashboard Design
Status Boxes

Questions / Comments:

Thanks for this

undisputedking (-3) - 5 years ago - Reply 0

Glad to hear that.

sainisagar310 () - 5 years ago - Reply 0