"Mail Box"
Bootstrap 3.3.0 Snippet by Mehedi-BN

<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 ----------> <div class="container"> <div class="row"> <div class="box-body no-padding"> <div class="mailbox-controls"> <!-- Check all button --> <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><!-- /.btn-group --> <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><!-- /.btn-group --> </div><!-- /.pull-right --> </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> <tr> <td><input type="checkbox"></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o 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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">28 mins ago</td> </tr> <tr> <td><input type="checkbox"></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o 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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">11 hours ago</td> </tr> <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">15 hours ago</td> </tr> <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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">Yesterday</td> </tr> <tr> <td><input type="checkbox"></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o 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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2 days ago</td> </tr> <tr> <td><input type="checkbox"></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o 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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">2 days ago</td> </tr> <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">2 days ago</td> </tr> <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">2 days ago</td> </tr> <tr> <td><input type="checkbox"></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o 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">2 days ago</td> </tr> <tr> <td><input type="checkbox"></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o 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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">4 days ago</td> </tr> <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">12 days ago</td> </tr> <tr> <td><input type="checkbox"></td> <td class="mailbox-star"><a href="#"><i class="fa fa-star-o 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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">12 days ago</td> </tr> <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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">14 days ago</td> </tr> <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"><i class="fa fa-paperclip"></i></td> <td class="mailbox-date">15 days ago</td> </tr> </tbody> </table><!-- /.table --> </div><!-- /.mail-box-messages --> </div><!-- /.box-body --> <hr> <div class="box-footer no-padding"> <div class="mailbox-controls"> <!-- Check all button --> <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><!-- /.btn-group --> <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><!-- /.btn-group --> </div><!-- /.pull-right --> </div> </div> </div><!-- /. box --> </div><!-- /.col --> </div><!-- /.row --> </div> </div>

Related: See More


Questions / Comments: