"Cards - Bootstrap Gallery"
Bootstrap 4.1.1 Snippet by BootstrapGallery

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="p-3">
<div class="row gx-3">
<div class="col-xxl-3 col-sm-6 col-12">
<div class="stats-tile d-flex align-items-center position-relative tile-red">
<div class="sale-icon icon-box xl rounded-5 me-3">
<i class="bi bi-pie-chart font-2x text-red"></i>
</div>
<div class="sale-details">
<h5 class="text-muted">Products</h5>
<h3>296</h3>
</div>
<div class="tile-count d-flex align-items-center justify-content-center flex-column fw-bold red">
<i class="bi bi-arrow-up-circle-fill font-1x"></i>
<span>3%</span>
</div>
</div>
</div>
<div class="col-xxl-3 col-sm-6 col-12">
<div class="stats-tile d-flex align-items-center position-relative tile-blue">
<div class="sale-icon icon-box xl rounded-5 me-3">
<i class="bi bi-sticky font-2x text-blue"></i>
</div>
<div class="sale-details">
<h5 class="text-muted">Orders</h5>
<h3>368</h3>
</div>
<div class="tile-count d-flex align-items-center justify-content-center flex-column fw-bold blue">
<i class="bi bi-arrow-up-circle-fill font-1x"></i>
<span>5%</span>
</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
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css";
@import "https://icons.getbootstrap.com/assets/font/bootstrap-icons.min.css";
.stats-tile {
padding: 2rem 1rem;
margin: 0 0 24px 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #fff;
border: 1px solid #b7c6d8;
box-shadow: rgba(76,78,100,.2) 0px 2px 10px 0px
}
.stats-tile .tile-count {
position: absolute;
right: -1px;
color: #fff
}
.stats-tile .tile-count.red {
background: url(https://www.bootstrap.gallery/demos/elite-admin-template/assets/images/tile-count-red.svg) no-repeat;
background-size: 100%;
background-position: center center;
width: 40px;
height: 115px
}
.stats-tile .tile-count.blue {
background: url(https://www.bootstrap.gallery/demos/elite-admin-template/assets/images/tile-count-blue.svg) no-repeat;
background-size: 100%;
background-position: center center;
width: 40px;
height: 115px
}
.stats-tile .tile-count.green {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: