<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>
<div class="container">
<div class="row">
<div class="box-body no-padding">
<div class="mailbox-controls">
<button class="btn btn-default btn-sm checkbox-toggle"><i class="glyphicon glyphicon-unchecked"></i></button>
<div class="btn-group">
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-trash"></i></button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-arrow-left"></i></button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-share-alt"></i></button>
</div>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-refresh"></i></button>
<div class="pull-right">
1-50/200
<div class="btn-group">
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-arrow-left"></i></button>
<button class="btn btn-default btn-sm"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</div>
</div>
<hr>
<div class="table-responsive mailbox-messages">
<table class="table table-hover table-striped">
<tbody>
<tr>
<td><input type="checkbox"></td>
<td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">WM06</a></td>
<td class="mailbox-subject"><b>WM06</b> - Trying to find a solution to this problem...</td>
<td class="mailbox-attachment"></td>
<td class="mailbox-date">5 mins ago</td>
</tr>
