Bootstrap Snippet dashboard using HTML CSS Bootstrap

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-fluid">
    <div class="row">
    
    <div class="page-heading">            
                                <h1>Dashboard</h1>
                                <div class="options">
    <div class="btn-toolbar">
        <a href="#" class="btn btn-default"><i class="fa fa-fw fa-cog"></i></a>
    </div>
</div>
                            </div>
    
        <div class="col-md-3">
            <a class="info-tiles tiles-inverse has-footer" href="#">
                <div class="tiles-heading">
                    <div class="pull-left">Orders</div>
                    <div class="pull-right">
                        <div id="tileorders" class="sparkline-block"><canvas width="39" height="13" style="display: inline-block; width: 39px; height: 13px; vertical-align: top;"></canvas></div>
                    </div>
                </div>
                <div class="tiles-body">
                    <div class="text-center">1,275</div>
                </div>
                <div class="tiles-footer">
                    <div class="pull-left">manage orders</div>
                    <div class="pull-right percent-change">+20.7%</div>
                </div>
            </a>
        </div>
        
        <div class="col-md-3">
            <a class="info-tiles tiles-green has-footer" href="#">
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
.tiles-heading,
.tiles-body,
.tiles-footer {
  -webkit-transition: 0.05s ease-in;
  -o-transition: 0.05s ease-in;
  transition: 0.05s ease-in;
}
.info-tiles,
.shortcut-tiles {
  margin: 0px 0px 20px;
  display: block;
  border-radius: 3px;
}
a.info-tiles,
a.shortcut-tiles {
  background: none;
}
.info-tiles .tiles-heading {
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
}
.info-tiles .tiles-heading .pull-right {
  -webkit-transition: 0.06s ease-in;
  -o-transition: 0.06s ease-in;
  transition: 0.06s ease-in;
  color: rgba(255, 255, 255, 0.4);
}
.info-tiles .tiles-heading .pull-right .sparkline-block {
  font-size: 0;
  padding: 2px 0;
}
.info-tiles .tiles-body {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"dashboard"
Bootstrap 3.3.0 Snippet by nanthagopal

Related: See More

Questions / Comments:

"dashboard" Bootstrap 3.3.0 Snippet by nanthagopal

Related: See More

Questions / Comments:

"dashboard"
Bootstrap 3.3.0 Snippet by nanthagopal