<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="well"> <table class="table"> <thead> <tr> <th>Tanggal cuti</th></th> <th>Lama cuti</th> <th>Status pengajuan cuti</th> <th style="width: 36px;"></th> </tr> </thead> <tbody> <tr> <td>1-2 Feb 2016</td> <td>2 hari</td> <td>Telah disetujui ole Sarah Took-took and Bobby Green</td> </tr> <tr> <td>11-13 Jan 2016</td> <td>3 hari</td> <td>Menunggu Persetujuan</td> </tr> <tr> <td>10 Jan 2016</td> <td>0.5 hari</td> <td>Ditolak oleh Sarah Took-took</td> </tr> </tbody> </table> </div> <div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Delete Confirmation</h3> </div> <div class="modal-body"> <p class="error-text">Are you sure you want to delete the user?</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> <button class="btn btn-danger" data-dismiss="modal">Delete</button> </div> </div>