Here we are give you demo of count box. In this count box or card you can display background icon, card or box title and total count,follower,likes etc.., this card design also you can use in admin panel dashboard modual count. bootstrap 4 facebook like count box. bootstrap 4 pintrest follower count card. instagram follower count box,twitter follower count box.

We allows to free snippets of bootstrap social follower count box , you can download full code of bootstrap admin panel dashboard count card layout. Here in this post i will give you example of follower count card snippet and you will get simple code of html, css and jquery. In count box card design snippet i give you three tab with html, css and js, you can easily get code of social page like count box layout.


<!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"> <div class="col-lg-4 col-sm-4 col-12 main-box-layout"> <div class="facebook-box rounded"> <i class="fa fa-facebook" aria-hidden="true"></i> </div> <div class="box-layout-text text-right"> <h1>31,153</h1> <span>Page Likes</span> </div> </div> <div class="col-lg-4 col-sm-4 col-12 main-box-layout"> <div class="instagram-box rounded"> <i class="fa fa-instagram" aria-hidden="true"></i> </div> <div class="box-layout-text text-right"> <h1>10,130</h1> <span>Followers</span> </div> </div> <div class="col-lg-4 col-sm-4 col-12 main-box-layout"> <div class="pinterest-box rounded"> <i class="fa fa-pinterest" aria-hidden="true"></i> </div> <div class="box-layout-text text-right"> <h1>11,200</h1> <span>Followers</span> </div> </div> </div> </div> </body> </html>
body{ background-color: #EEF1F5; margin-top: 30px } .main-box-layout{ position: relative; margin-bottom: 10px; } .facebook-box,.instagram-box,.pinterest-box,.twitter-box,.youtube-box,.linkedin-box{ color:#4E69A2; background-color: #3B5998; font-size:95px; height:100px; overflow: hidden; padding-left:3px; } .instagram-box{ background-color: #B7378B; color:#BE4A96; } .pinterest-box{ background-color: #BC081C; color:#C32032; } .twitter-box{ background-color: #59ADEB; color:#68B5ED; } .youtube-box{ background-color: #E02A20; color:#E33E35; } .linkedin-box{ background-color:#007AB9; color:#1d85c4; } .box-layout-text{ position: absolute; top:15px; color:#fff; right:25px; height: 100px; overflow: hidden; } .box-layout-text h1{ font-size:30px; margin: 0px; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post