"Admin Cards"
Bootstrap 4.1.1 Snippet by reda001

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'> </head> <body> <div class="contentPanel col-12"> <div class="container mb-3"> <h4 class="text-capitalize">Dashboard</h4> <div class="row d-flex flex-row justify-content-around analytiquePanel"> <div class="col-lg-3 col-md-6 col-12"> <div id="analytiqueBox1" class=" row analytiqueBox"> <div class="titleNumber col-8"> <h1>10</h1> <h6 class="text-uppercase">IN PROGRESS</h6> </div> <div class=" col-4 analytiqueIcon"> <i class='bx bx-list-ul'></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-12"> <div id="analytiqueBox2" class=" row analytiqueBox"> <div class="titleNumber col-8"> <h1>30</h1> <h6 class="text-uppercase">Completed</h6> </div> <div class=" col-4 analytiqueIcon"> <i class='bx bx-check-circle'></i> </div> </div> </div> <div class="col-lg-3 col-md-6 col-12"> <div id="analytiqueBox3" class=" row analytiqueBox"> <div class="titleNumber col-8"> <h1>20</h1> <h6 class="text-uppercase">this month</h6> </div> <div class=" col-4 analytiqueIcon"> <i class='bx bx-calendar' ></i> </div> </div> </div> </div> </div> </div> </body> </html>
.contentPanel { padding:30px 0; background:#F4F6F9; } .analytiquePanel { padding:20px 0; overflow:hidden!important; } .analytiqueBox { background:#fff; position:relative; border-radius:10px; border:1px solid #707070; } .analytiqueBox:before { content:""; position:absolute; top:0; left:-5px; width:100%; height:100%; border-radius:10px; } .titleNumber , .analytiqueIcon { background:#fff; } .titleNumber { border-radius: 10px 0 0 10px; } .analytiqueIcon { border-radius: 0 10px 10px 0 ; } .titleNumber h6 { font-weight:bold; } .analytiqueIcon i { position:relative; top:50%; left:50%; transform:translate(-50%,-50%); font-size: 70px; opacity:0.3; } #analytiqueBox1 .titleNumber h6 { color:#4E73DF; } #analytiqueBox1:before { background:#4E73DF; box-shadow: 10px 10px 15px #4e73df42; } #analytiqueBox2 .titleNumber h6 { color:#1CC88A; } #analytiqueBox2:before { background:#1CC88A; box-shadow: 10px 10px 15px #1cc88a2b; } #analytiqueBox3 .titleNumber h6 { color:#36B9CC; } #analytiqueBox3:before { background:#36B9CC; box-shadow: 10px 10px 15px #36b9cc24; }

Related: See More

Paper Dashboard React
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: