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; }




Random Post




Related Post

Our team section layout design in bootstrap

Our team section layout design in bootstrap

Ready Code of Our team section layout design in bootstrap css framework

Read More
plan box design using bootstrap and html css

plan box design using bootstrap and html css

Simple plan box design design usign bootstrap and custon css. you can easly implementation in you project. you can get code of bootstrap pricing table free s...

Read More
Ecommerce product box design using bootstrap

Ecommerce product box design using bootstrap

simple ecommerce product box design using bootstrap. with add to cart button and with product description and price using html and css. you can get code of p...

Read More