<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"> <div class="row"> <div class="col-lg-3"> <div class="panel panel-info"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-address-card-o fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">1</p> <p class="announcement-text">Profiles</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-3"> <div class="panel panel-warning"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-barcode fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">12</p> <p class="announcement-text"> Products</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-3"> <div class="panel panel-danger"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-users fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">18</p> <p class="announcement-text">Users</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-3"> <div class="panel panel-success"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-comments fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">9000</p> <p class="announcement-text"> Orders!</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>