<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="col-md-10 column"> <div class="row clearfix"> <div class="col-md-3 column"> <div class="panel panel-default"> <div class="panel-heading libreStatsPanelHeading"> <div class="panel-title"> <span>Traffic</span> <a class="fa fa-caret-down pull-right libreStatsPanelHeadingIcon" href="#uniqueVisitor" data-toggle="collapse"></a> </div> </div> <div class="panel-body libreStatsPanelBody collapse in" id="uniqueVisitor"> <div class="row clearfix libreStatsPanelRow"> <div class="col-md-8 column libreStatsPanelValueColumn"> <p class="libreStatsCount">10</p> <small>Unique Visitor</small> </div> <div class="col-md-4 column"> <span class="pull-right fa fa-user fa-5x libreStatsIcon"></span> </div> </div> </div> </div> </div> <div class="col-md-3 column"> <div class="panel panel-default"> <div class="panel-heading libreStatsPanelHeading"> <div class="panel-title"> <span>Activity</span> <a class="fa fa-caret-down pull-right libreStatsPanelHeadingIcon" href="#activity" data-toggle="collapse"></a> </div> </div> <div class="panel-body libreStatsPanelBody collapse in" id="activity"> <div class="row clearfix libreStatsPanelRow"> <div class="col-md-8 column libreStatsPanelValueColumn"> <p class="libreStatsCount">320</p> <small>New Comments</small> </div> <div class="col-md-4 column"> <span class="pull-right fa fa-comments-o fa-5x libreStatsIcon"></span> </div> </div> </div> </div> </div> <div class="col-md-3 column"> <div class="panel panel-default"> <div class="panel-heading libreStatsPanelHeading"> <div class="panel-title"> <span>User</span> <a class="fa fa-caret-down pull-right libreStatsPanelHeadingIcon" href="#user" data-toggle="collapse"></a> </div> </div> <div class="panel-body libreStatsPanelBody collapse in" id="user"> <div class="row clearfix libreStatsPanelRow"> <div class="col-md-8 column libreStatsPanelValueColumn"> <p class="libreStatsCount">190</p> <small>New User</small> </div> <div class="col-md-4 column"> <span class="pull-right fa fa-users fa-5x libreStatsIcon"></span> </div> </div> </div> </div> </div> <div class="col-md-3 column"> <div class="panel panel-default"> <div class="panel-heading libreStatsPanelHeading"> <div class="panel-title"> <span>Sales</span> <a class="fa fa-caret-down pull-right libreStatsPanelHeadingIcon" href="#sales" data-toggle="collapse"></a> </div> </div> <div class="panel-body libreStatsPanelBody collapse in" id="sales"> <div class="row clearfix libreStatsPanelRow"> <div class="col-md-8 column libreStatsPanelValueColumn"> <p class="libreStatsCount">23,145</p> <small>Dollar</small> </div> <div class="col-md-4 column"> <span class="pull-right fa fa-dollar fa-5x libreStatsIcon"></span> </div> </div> </div> </div> </div> </div> </div>