<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <div class="col-lg-6-custom"> <div class="panel panel-info"> <div class="" style="background: #3b5998"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-facebook fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-text">500</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Expand </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-lg-6-custom"> <div class="panel panel-info"> <div class="_panel-heading" style="background: #1da1f2"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-twitter fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-text">500</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Expand </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-lg-6-custom"> <div class="panel panel-info"> <div class="_panel-heading" style="background: #3aa4c6"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-map-marker fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-text">500</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Expand </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-lg-6-custom"> <div class="panel panel-info"> <div class="_panel-heading" style="background: #008da2"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-facebook fa-5x"></i> </div> <div class="col-xs-6 text-right"> <!--p class="announcement-heading">1</p--> <p class="announcement-text">500</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Expand </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> </div><!-- /.row --> </div>

.fa-5x { color:#fff !important; padding:30px; } p.announcement-text { color:#fff; font-size:170px; padding:10px 20px ; font-weight:600; opacity:.9; } .panel-footer { background: #f0f0f2; border:0; border-radius:0; display:none; } .panel { border-radius:0; border:0px; margin-bottom:0; } .fa-5x { font-size:17em !important; } .col-lg-6-custom { padding:0; width:50%; height:50%; float:left; }