<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=" well col-xs-6 col-md-3"> RM234567</br> <b>Permata Sari</b></br> 29 tahun / 23 Jan 1986 <hr> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Rekam Medis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Diagnosis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Terapi</a></li> <li role="presentation" class="active"><a href="#"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Hasil Radiologi</a></li> </ul> </div> <div class=" col-xs-12 col-sm-6 col-md-9"> <h3><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Lab / Radiologi</h3> <div class="panel panel-default"> <div class="panel-heading"><h4>Permintaan baru</h4></div> </br> <form> <div class="row"> <div class="col-md-5" style=" margin-left: 30px;"> <div class="form-group" > <label for="description">Deskripsi</label> <input type="text" class="form-control" id="description" placeholder="Deskripsi"> </div> <div class="form-group"> <label for="clinicalInformation">Keterangan Klinis / Diagnosis</label> <textarea type="text" class="form-control" rows="3" id="clinicalInformation" placeholder="Keterangan klinis / diagnosis"></textarea> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="additionalInfo">Informasi Tambahan</label> <textarea class="form-control" rows="4" id="additionalInfo" placeholder="Informasi tambahan"></textarea> </div> <button type="submit" class="btn btn-primary">Kirim permintaan baru</button> </div> </div> </form> </div> <div class="panel panel-default"> <div class="panel-heading"><h4>Hasil Lab / Radiologi</h4></div> <table class="table"> <thead> <tr> <th>Waktu permintaan</th> <th>Deskripsi</th> <th>Hasil</th> <th>Lampiran</th> </tr> </thead> <tbody> <tr> <td>23/Feb/15 - 11:14</td> <td><a href="#" data-toggle="modal" data-target="#hematologiModal">Pemeriksaan hematologi </a></td> <td>Hb10.8 Ht32.2 L9.0 Tr487 </td> <td><a href="#" data-toggle="modal" data-target="#lampiranModal"><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span> </a></td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="hematologiModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel"><center>Permintaan Lab / Radiologi</center></h4> </div> <div class="modal-body"> 23/Feb/15 - 11:14 </br> dr. Silvia Nurahman</br> </br> <b>Deskripsi:</b> </br> Pemeriksaan hematologi </br> <b>Keterangan Klinis / Diagnosis:</b> </br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</br> <b>Informasi tambahan:</b> </br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="lampiranModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel"><center>Lampiran Lab / Radiologi</center></h4> </div> <div class="modal-body"> <center> <img src="http://www.felinecaninekidneydisease.com/picts-S/LabResults.gif"> </center> </div> </div> </div> </div>

hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; }