<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 ----------> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal"> Launch Horizontal Form </button> <!-- Modal --> <div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header" style="background-color:white;"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel"> Low Inventory Warning! </h4> </div> <!-- Modal Body --> <div class="modal-body"> <h5 class="text-center" style="font-weight:bold;">Re-Order Information</h5> <table class="table table-condensed" id="tblGrid"> <thead id="tblHead"> <tr> <th>SKU #</th> <th>Description</th> <th class="text-right">Quantity In-Stock</th> </tr> </thead> <tbody> <tr> <td>7263-0915</td> <td>28" Goodyear 700C Road Tire</td> <td class="text-right">2</td> </tr> </tbody> </table> <div class="form-group"> <input type="button" class="btn btn-warning btn-sm pull-right" value="Fix Incorrect Quantites"> <div class="clearfix"></div> </div> <table class="table table-condensed" id="tblGrid"> <thead id="tblHead"> <tr> <th>Supplier</th> <th>Est. Arrival</th> <th class="text-right"> Re-Order Quantity</th> </tr> </thead> <tbody> <tr> <td>Olympic Supply</td> <td>2 Business Days</td> <td class="text-right">10</td> </tr> </tbody> </table> <table class="table table-condensed" id="tblGrid"> <thead id="tblHead"> <tr> <th>Item Cost</th> <th>Shipping Cost</th> <th class="text-right"> Total (incl. tax)</th> </tr> </thead> <tbody> <tr> <td>$15.99</td> <td>$9.99</td> <td class="text-right">$169.89</td> </tr> </tbody> </table> <div class="container"> </div> <form class="form-inline" role="form"> <div class="form-group"> <label class=" control-label" for="inputEmail3">Employee ID</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"/> </div> </div> <div class="form-group"> <label class=" control-label" for="inputPassword3" >Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"/> </div> </div> </form> </div> <!-- Modal Footer --> <div style= "text-align: center" class="modal-footer"> <button type="button" class="btn btn-default btn-custom" data-dismiss="modal"> Ignore </button> <button type="button" class="btn btn-primary"> Authorize & Place Order </button> </div> </div> </div> </div>

.modal-body .form-horizontal .col-sm-2, .modal-body .form-horizontal .col-sm-10 { width: 100% } .modal-body .form-horizontal .control-label { text-align: left; } .modal-body .form-horizontal .col-sm-offset-2 { margin-left: 15px; } .modal-content { background-color: #eeeeee; } .btn-custom { color: #428bca; }