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




Random Post




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. bootstrap 4 provide new deisgn of user profile. custom profile with social icon. i...

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 with screen resolution less than 576px. ".col-sm-" class work with screen resol...

Read More
Bootstrap 4 new buuton style

Bootstrap 4 new buuton style

Here we create small example for bootstrap 4 new button style. you can simply use this button in your website. we provide some custom design in bootstrap 4 butt...

Read More