<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 ----------> <link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style> <script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <legend>My Listings</legend> </div> </div> <div class="row"> <div class="col-md-12"> <table class="table table-responsive table-hover table-bordered "> <thead> <tr class="info"> <th>Status</th> <th> <input type="checkbox" value=""></th> <th>Title</th> <th>Edit</th> <th>Author</th> <th>Category</th> <th>Location</th> <th>Date</th> <th>Expiration Date</th> </tr> </thead> <tbody> <tr> <td class="success">Active</td> <td> <input type="checkbox" value=""></td> <td><a href="#">Example Ad</a></td> <td><div class="btn-group"> <button type="button" class="btn btn-primary btn-sm">Options</button> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Edit</a></li> <li><a href="#">Delete</a></li> <li><a href="#">Deactivate</a></li> <li><a href="#">Block</a></li> <li><a href="#">Mark as Spam</a></li> <li><a href="#">Mark as Premium</a></li> </ul> </div> </td> <td>Example author</td> <td>Animals</td> <td>Example city, Example region, Example country</td> <td>September 12, 2017 6:40 am</td> <td>Never expires</td> </tr> </tbody> </table> </div> </div> </div>