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:





Related Post

Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bo...

Read More
Bootstrap 4 div structure and how to use bootstrap 4 div class ?

Bootstrap 4 div structure and how to use bootstrap 4 div cla...

Here We explain how to work bootstrap 4 column structure. ".col-" class work...

Read More
Bootstrap 4 new button style

Bootstrap 4 new button style

Here we create small example for bootstrap 4 new button style. you can simply us...

Read More

Random Post