"Responsive Dashboard Card Design with Hover"
Bootstrap 4.1.1 Snippet by RDXVIKASH

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 lang="en"> <head> <title>Bootstrap 4 Responsive Dashboard Card Design</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xl-3 col-md-6"> <div class="card-box bg-blue"> <div class="inner"> <h3> 13436 </h3> <p> Student Strength </p> </div> <div class="icon"> <i class="fa fa-graduation-cap" aria-hidden="true"></i> </div> <a href="#" class="card-box-footer">View More <i class="fa fa-arrow-circle-right"></i></a> </div> </div> <div class="col-xl-3 col-md-6"> <div class="card-box bg-green"> <div class="inner"> <h3> ₹185358 </h3> <p> Today’s Collection </p> </div> <div class="icon"> <i class="fa fa-money" aria-hidden="true"></i> </div> <a href="#" class="card-box-footer">View More <i class="fa fa-arrow-circle-right"></i></a> </div> </div> <div class="col-xl-3 col-md-6"> <div class="card-box bg-orange"> <div class="inner"> <h3> 5464 </h3> <p> New Admissions </p> </div> <div class="icon"> <i class="fa fa-user-plus" aria-hidden="true"></i> </div> <a href="#" class="card-box-footer">View More <i class="fa fa-arrow-circle-right"></i></a> </div> </div> <div class="col-xl-3 col-md-6"> <div class="card-box bg-red"> <div class="inner"> <h3> 723 </h3> <p> Faculty Strength </p> </div> <div class="icon"> <i class="fa fa-users"></i> </div> <a href="#" class="card-box-footer">View More <i class="fa fa-arrow-circle-right"></i></a> </div> </div> </div> </div> </body> </html>
.card-box { position: relative; color: #fff; padding: 20px 10px 40px; margin: 20px 0px; } .card-box:hover { text-decoration: none; color: #f1f1f1; } .card-box:hover .icon i { font-size: 100px; transition: 1s; -webkit-transition: 1s; } .card-box .inner { padding: 5px 10px 0 10px; } .card-box h3 { font-size: 27px; font-weight: bold; margin: 0 0 8px 0; white-space: nowrap; padding: 0; text-align: left; } .card-box p { font-size: 15px; } .card-box .icon { position: absolute; top: auto; bottom: 5px; right: 5px; z-index: 0; font-size: 72px; color: rgba(0, 0, 0, 0.15); } .card-box .card-box-footer { position: absolute; left: 0px; bottom: 0px; text-align: center; padding: 3px 0; color: rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.1); width: 100%; text-decoration: none; } .card-box:hover .card-box-footer { background: rgba(0, 0, 0, 0.3); } .bg-blue { background-color: #00c0ef !important; } .bg-green { background-color: #00a65a !important; } .bg-orange { background-color: #f39c12 !important; } .bg-red { background-color: #d9534f !important; }

Related: See More

Paper Dashboard
Hover Effect Style
bootstrap 4 card
Card Styles

Questions / Comments: