NiceSnippets.com
Admin dashboard box with hover effect using bootstrap 4
Admin dashboard card design with bootstrap gride view. this dashboard box card is fully responsive. in this card you can see title,total or number and with animated icon. when you can hove on card at that time icon has been spin and display icon big.
you can get code of admin dashboard card snippet. we give you example of admin dashboard card examples , you can simple copy bellow code and use in your project. If it free snippets of admin dashboard count box So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code admin panel count in bootstrap snippets, click on JS Code tab get code of jquery codd for admin panel dashboard design demo snippets, same as for CSS Code tab. It's pretty easy and simple example of box design with spin icon example snippet.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div class="container main-section">
<div class="row justify-content-md-center">
<div class="col-lg-3 col-sm-4 col-12 text-center">
<div class="row main-box-layout img-thumbnail">
<div class="col-lg-12 col-sm-12 col-12 box-icon-section bg-primary">
<i class="fa fa-magic" aria-hidden="true"></i>
</div>
<div class="col-lg-12 col-sm-12 col-12 box-text-section">
<p>Magic</p>
</div>
<div class="label">
<h3><span class="badge badge-pill bg-primary">1.20</span></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-4 col-12 text-center">
<div class="row main-box-layout img-thumbnail">
<div class="col-lg-12 col-sm-12 col-12 box-icon-section bg-warning">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="col-lg-12 col-sm-12 col-12 box-text-section">
<p>Ratting</p>
</div>
<div class="label">
<h3><span class="badge badge-pill bg-warning">200</span></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-4 col-12 text-center">
<div class="row main-box-layout img-thumbnail">
<div class="col-lg-12 col-sm-12 col-12 box-icon-section bg-danger">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
<div class="col-lg-12 col-sm-12 col-12 box-text-section">
<p>View</p>
</div>
<div class="label">
<h3><span class="badge badge-pill bg-danger">103</span></h3>
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-lg-3 col-sm-4 col-12 text-center">
<div class="row main-box-layout img-thumbnail">
<div class="col-lg-12 col-sm-12 col-12 box-icon-section bg-info">
<i class="fa fa-user-o" aria-hidden="true"></i>
</div>
<div class="col-lg-12 col-sm-12 col-12 box-text-section">
<p>User</p>
</div>
<div class="label">
<h3><span class="badge badge-pill bg-info">10.25</span></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-4 col-12 text-center">
<div class="row main-box-layout img-thumbnail">
<div class="col-lg-12 col-sm-12 col-12 box-icon-section bg-success">
<i class="fa fa-picture-o" aria-hidden="true"></i>
</div>
<div class="col-lg-12 col-sm-12 col-12 box-text-section">
<p>Image</p>
</div>
<div class="label">
<h3><span class="badge badge-pill bg-success">301</span></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-4 col-12 text-center">
<div class="row main-box-layout img-thumbnail">
<div class="col-lg-12 col-sm-12 col-12 box-icon-section bg-secondary">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</div>
<div class="col-lg-12 col-sm-12 col-12 box-text-section">
<p>Edit</p>
</div>
<div class="label">
<h3><span class="badge badge-pill bg-secondary">20.8</span></h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background-color:#FCF4D9;
}
.main-box-layout{
margin: 0px;
margin-top: 30px;
position: relative;
box-shadow: -3px 3px 3px 0px #c1c1c1;
}
.main-box-layout:hover .box-icon-section i{
font-size:70px;
transform: rotate(360deg);
transition:1s;
}
.box-icon-section{
display: table;
height:100px;
color:#fff;
}
.box-icon-section i{
font-size:30px;
display: table-cell;
vertical-align: middle;
transition:transform 0.4s ease-in-out;
transition: 1s;
}
.box-text-section{
background-color:#c3c3c3;
}
.box-text-section p{
margin: 0px;
color:#fff;
padding:10px 0px;
}
.label .badge{
position: absolute;
top:-19px;
left: 50%;
transform: translateX(-50%);
background-color: #f1f1f1;
color: #fff;
box-shadow: 0px 0px 3px 0px #fff;
border: 3px solid #fff;
}
