<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> <div class="col-xxl-3 col-sm-6 col-12"> <div class="stats-tile d-flex align-items-center position-relative tile-yellow"> <div class="sale-icon icon-box xl rounded-5 me-3"> <i class="bi bi-emoji-smile font-2x text-yellow"></i> </div> <div class="sale-details"> <h5 class="text-muted">Customers</h5> <h3>725</h3> </div> <div class="tile-count d-flex align-items-center justify-content-center flex-column fw-bold yellow"> <i class="bi bi-arrow-up-circle-fill font-1x"></i> <span>7%</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-green"> <div class="sale-icon icon-box xl rounded-5 me-3"> <i class="bi bi-star font-2x text-green"></i> </div> <div class="sale-details"> <h5 class="text-muted">Reviews</h5> <h3>95%</h3> </div> <div class="tile-count d-flex align-items-center justify-content-center flex-column fw-bold green"> <i class="bi bi-arrow-down-circle-fill font-1x"></i> <span>9%</span> </div> </div> </div> </div> </div>

@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 { background: url(https://www.bootstrap.gallery/demos/elite-admin-template/assets/images/tile-count-green.svg) no-repeat; background-size: 100%; background-position: center center; width: 40px; height: 115px } .stats-tile .tile-count.yellow { background: url(https://www.bootstrap.gallery/demos/elite-admin-template/assets/images/tile-count-yellow.svg) no-repeat; background-size: 100%; background-position: center center; width: 40px; height: 115px } .stats-tile.tile-green { border: 1px solid #2c998d } .stats-tile.tile-green .sale-icon { background: radial-gradient(circle, #158c7f -100%, #ffffff 65%); border: 1px solid #2c998d } .stats-tile.tile-red { border: 1px solid #e4515e } .stats-tile.tile-red .sale-icon { background: radial-gradient(circle, #e13d4b -100%, #ffffff 65%); border: 1px solid #e4515e } .stats-tile.tile-yellow { border: 1px solid #ffb31b } .stats-tile.tile-yellow .sale-icon { background: radial-gradient(circle, #fda901 -100%, #ffffff 65%); border: 1px solid #ffb31b } .stats-tile.tile-blue { border: 1px solid #276dd9 } .stats-tile.tile-blue .sale-icon { background: radial-gradient(circle, #276dd9 -100%, #ffffff 65%); border: 1px solid #276dd9 } .icon-box { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; font-size: 2rem; } .text-primary { color: #1553a3 !important } .text-secondary { color: #707f93 !important } .text-red { color: #e13d4b !important } .text-green { color: #158c7f !important } .text-yellow { color: #fda901 !important } .text-blue { color: #276dd9 !important }