<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippets bootdey"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="mini-stat clearfix bg-facebook rounded"> <span class="mini-stat-icon"><i class="fa fa-facebook fg-facebook"></i></span> <div class="mini-stat-info"> <span>5,762</span> Facebook Like </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="mini-stat clearfix bg-twitter rounded"> <span class="mini-stat-icon"><i class="fa fa-twitter fg-twitter"></i></span> <div class="mini-stat-info"> <span>7,153</span> Twitter Followers </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="mini-stat clearfix bg-googleplus rounded"> <span class="mini-stat-icon"><i class="fa fa-google-plus fg-googleplus"></i></span> <div class="mini-stat-info"> <span>793</span> Google+ Posts </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="mini-stat clearfix bg-bitbucket rounded"> <span class="mini-stat-icon"><i class="fa fa-bitbucket fg-bitbucket"></i></span> <div class="mini-stat-info"> <span>8,932</span> Repository </div> </div> </div> </div> </div>

body{ background:#eee; margin-top:20px; } .rounded { -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; border-radius: 3px !important; } .mini-stat { padding: 15px; margin-bottom: 20px; } .mini-stat-icon { width: 60px; height: 60px; display: inline-block; line-height: 60px; text-align: center; font-size: 30px; background: none repeat scroll 0% 0% #EEE; border-radius: 100%; float: left; margin-right: 10px; color: #FFF; } .mini-stat-info { font-size: 12px; padding-top: 2px; } span, p { color: white; } .mini-stat-info span { display: block; font-size: 30px; font-weight: 600; margin-bottom: 5px; margin-top: 7px; } /* ================ colors =====================*/ .bg-facebook { background-color: #3b5998 !important; border: 1px solid #3b5998; color: white; } .fg-facebook { color: #3b5998 !important; } .bg-twitter { background-color: #00a0d1 !important; border: 1px solid #00a0d1; color: white; } .fg-twitter { color: #00a0d1 !important; } .bg-googleplus { background-color: #db4a39 !important; border: 1px solid #db4a39; color: white; } .fg-googleplus { color: #db4a39 !important; } .bg-bitbucket { background-color: #205081 !important; border: 1px solid #205081; color: white; } .fg-bitbucket { color: #205081 !important; }