<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"><div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">Sandbox</h4> </div> <div class="panel-body"> <!--<div class="row"><div class="col-md-6"><h4>60</h4><h4>New developers in last 7 days</h4></div>--> <!--<div class="col-md-6"><h4>+20%</h4><h4>Since week before</h4></div>--> <!-- </div>--> <div class="row"> <div class="counters with-borders"> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="20000" data-append="+">20+</strong> <label>New developers in last 7 days</label> </div> </div> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="15">15+</strong> <label>Since week before</label> </div> </div> </div> </div> </div> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">Launch</h4> </div> <div class="panel-body"> <!--<div class="row"><div class="col-md-6"><h4>60</h4><h4>New developers in last 7 days</h4></div>--> <!--<div class="col-md-6"><h4>+20%</h4><h4>Since week before</h4></div>--> <!-- </div>--> <div class="row"> <div class="counters with-borders"> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="20000" data-append="+">20+</strong> <label>New developers in last 7 days</label> </div> </div> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="15">15%</strong> <label>Since week before</label> </div> </div> </div> </div> <hr> <div class="row"><div class="col-md-3"><h4>20</h4><p>Pending</p></div> <div class="col-md-3"><h4>15</h4><p>Approved</p></div> <div class="col-md-3"><h4>5</h4><p>Rejected</p></div> </div><hr> <div class="row"><div class="col-md-8"><h4>Last Active Customers</h4> <ul class = "list-group"><li class = "list-group-item">User1</li> <li class = "list-group-item">User2</li> <li class = "list-group-item">User3</li></ul></div> </div> </div> </div> </div> <div class="row"> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title">Grow</h4> </div> <div class="panel-body"> <div class="row"><div class="col-md-6"><h4>60</h4><h4>New developers in last 7 days</h4></div> <div class="col-md-6"><h4>+20%</h4><h4>Since week before</h4></div> </div> <hr> <div class="row"><div class="col-md-8"><h4>Last Active Customers</h4> <ul class="list-group"><li class = "list-group-item" >User1</li> <li class = "list-group-item" >User2</li> <li class = "list-group-item">User3</li></ul></div> </div> </div> </div> </div> <div class="row"> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title">Zendesk Tickets</h4> </div> <div class="panel-body"> <div class="row"><div class="col-md-4"><h4>Tickets Generated last week</h4><p>35</p></div><div class="col-md-4"><h4>Last Active Customers</h4> </div> </div> </div> </div> </div>