<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 id="fullscreen_bg" class="fullscreen_bg"/> <div class="container"> <div class="col-md-13"> <div class="panel panel-primary"> <div class="panel-heading" > <h3 class="panel-title">Adults Treatments</h3> </div> <div class="scorable"> <div class="panel-body pane" >Panel content</div> <div class="panel-body pane">Panel content</div> <div class="panel-body pane">Panel content</div> <div class="panel-body pane">Panel content</div> <div class="panel-body pane">Panel content</div> </div> </div> </div> </div> <button class="button3">Treatments for Adults</button> <button class="button4">Treatments for Kids</button> <form> <button class="button2">Upload Image</button> </form> <form> <button class="button1">View Images</button> </form> <form class="form-signin"> <div class="container"> <div class="col-md-9 col-md-offset-2"> <div class="panel panel-default " > <div class="panel-body"> <table class="table table-striped table-condensed"> <thead > <tr> <th >Date</th> <th >Time</th> <th >Patient Name</th> <th >Medicine</th> <th >Tooth</th> <th >Total Price</th> <th >Paid</th> <th class="ss">The rest</th> <th class="ss">Status</th> <th class="ss">Delete</th> </tr> </thead> <tbody> <tr> <td>12/3/2016</td> <td>12:21:26</td> <td>Amir Mostafa</td> <td>composite</td> <td>8UL</td> <td>1000</td> <td>200</td> <td class="ss"> <input type="text" class="form-control" style="height:25px"/></td> <td class="sd"><button class="btn btn-sm btn-primary btn-block btn-danger" style="height:25px">Not Completed</button></td> <td class="ss"><a class="btn btn-sm btn-primary btn-block" role="button" style="height:25px">Delete</a></td> </tr> <tr> <td >12/3/2016</td> <td>12:21:26</td> <td>Amir Mostafa</td> <td>composite</td> <td>8UL</td> <td>1000</td> <td>200</td> <td class="ss"> <input type="text" class="form-control" style="height:25px"/></td> <td class="sd"><button class="btn btn-sm btn-primary btn-block btn-danger" style="height:25px">Not Completed</button></td> <td class="ss"><a class="btn btn-sm btn-primary btn-block" role="button" style="height:25px">Delete</a></td> </tr> <tr> <td>12/3/2016</td> <td>12:21:26</td> <td>Amir Mostafa</td> <td>composite</td> <td>8UL</td> <td>1000</td> <td>200</td> <td class="ss"> <input type="text" class="form-control" style="height:25px" /></td> <td class="sd"><button class="btn btn-sm btn-primary btn-block btn-danger" style="height:25px">Not Completed</button></td> <td class="ss"><a class="btn btn-sm btn-primary btn-block" role="button" style="height:25px">Delete</a></td> </tr> <tr> <td>12/3/2016</td> <td>12:21:26</td> <td>Amir Mostafa</td> <td>composite</td> <td>8UL</td> <td>1000</td> <td>200</td> <td class="ss"> <input type="text" class="form-control" style="height:25px" /></td> <td class="sd"><button class="btn btn-sm btn-primary btn-block btn-danger" style="height:25px">Not Completed</button></td> <td class="ss"><a class="btn btn-sm btn-primary btn-block" role="button" style="height:25px">Delete</a></td> </tr> </tbody> </div></div></div></div></table> <button class="btn btn-sm btn-primary btn-block">Save</button> </form>

.form-signin { position:absolute; max-width: 0px; max-height: 20px; padding: 110px; margin:100px; margin-top:20px; } .table table-striped table-condensed{ } .fullscreen_bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: 50% 50%; background-image: url('http://i.imgur.com/aFs5QmP.jpg'); background-repeat:repeat; } .ss { width:70px; } th , td{ text-align:center; } .button2 { background-color: #ffffff; color: black; display : inline-block; border:1px dotted #ccc; padding : 6px 27px ; border-radius: 8px; position:absolute; bottom : 75px; margin-left:47px; } .button1 { background-color: #ffffff; color: black; display : inline-block; border:1px dotted #ccc; padding : 6px 30px ; border-radius: 8px; position:absolute; bottom : 25px; margin-left:47px; } .button3 { background-color: #ffffff; color: black; display : inline-block; border:1px dotted #ccc; padding : 6px 25px ; border-radius: 8px; position:absolute; bottom : 300px; margin-left:30px; } .button4 { background-color: #ffffff; color: black; display : inline-block; border:1px dotted #ccc; padding : 6px 30px ; border-radius: 8px; position:absolute; bottom : 250px; margin-left:30px; } table{ overflow-y:scroll; height:140px; display:block; } td{ height:200; } .panel{ position:absolute; padding: 0px; margin-top:280px; margin-left:-68px; } .pane { max-height: 20px; } .scorable{ overflow-y:scroll; height:160px; display:block; }