<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6"> <div class="widget"> <div class="widget-heading clearfix"> <div class="pull-left">Shares</div> <div class="pull-right"><i class="fa fa-angle-down"></i> 40.5^%</div> </div> <div class="widget-body clearfix"> <div class="pull-left"> <i class="fa fa-twitter"></i> </div> <div class="pull-right number">25000</div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6"> <div class="widget"> <div class="widget-heading clearfix"> <div class="pull-left">Downloads</div> <div class="pull-right"><i class="fa fa-angle-up"></i> 89.9^%</div> </div> <div class="widget-body clearfix"> <div class="pull-left"> <i class="fa fa-upload"></i> </div> <div class="pull-right number">35000</div> </div> </div> </div> </div> </div>

@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"); body{margin-top:40px;color:#fff} .widget { margin: 0 0 25px 0; display: block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .widget .widget-heading { padding: 7px 15px; -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; text-transform: uppercase; text-align: center; background: #38BDFF; color: white; } .widget .widget-body { padding: 10px 15px; font-size: 36px; font-weight: 300; background: #8FDEFF; }