<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="row"> <div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2"> <div class="panel panel-default main"> <div class="panel-body"> <div class="row"> <div class="col-lg-9 col-md-9 col-sm-9"> <h3>From</h3> <p>John Doe</p> <p class="offset-margin">713 Crescent Dr</p> <p class="offset-margin">Suite 9-2136</p> <p class="offset-margin">Los Angeles CA 90210</p> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <h1>Invoice</h1> </div> </div> <!--row--> <hr> <div class="row"> <div class="col-lg-9 col-md-9 col-sm-9"> <h3>To</h3> <p>Jane Doe</p> <p class="offset-margin">239 Crescent Dr</p> <p class="offset-margin">Los Angeles CA 90210</p> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <p><label>Invoice#:</label> 00013</p> <p><label>Invoice Date:</label> 10/12/17</p> <p><label>Due Date:</label> 10/12/17</p> </div> </div> <!--row--> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 content"> <div class="panel panel-default"> <!--<div class="panel-heading">--> <!-- <h1 class="panel-title">Invoice Details</h1>--> <!--</div>--> <div class="panel-body"> <div class="row"> <div class=" col-lg-12 col-md-12 col-sm-12 description"> <table class="table"> <thead> <tr> <th>Itme</th> <th>Description</th> <th>Qty</th> </tr> </thead> <tbody> <tr> <td><img src="http://via.placeholder.com/90x90"></td> <td> This is a description for an item.</td> <td>1</td> </tr> <tr> <td><img src="http://via.placeholder.com/90x90"></td> <td>This is a description for an item.</td> <td>1</td> </tr> <tr> <td><img src="http://via.placeholder.com/90x90"></td> <td>This is a description for an item.</td> <td>1</td> </tr> </tbody> </table> </div> <div class="col-lg-8 pull-left" style="border-top:solid #ddd 1px;"></div> <div class="col-lg-4 col-md-4 col-sm-4 pull-right blank"> <table class="table table bordered"> <tbody> <tr> <td><label>Subtotal:</label><span class="pull-right">$0.00</span></td> </tr> <tr> <td><label>Total:</label><span class="pull-right">$0.00</span></td> </tr> <tr> <td><label>Amount Paid:</label><span class="pull-right">$0.00</span></td> </tr> <tr style="background-color:#eee;"> <td><label>Amount Due:</label><span class="pull-right">$0.00</span></td> </tr> </tbody> </table> </div> </div> <!--row--> </div> </div> </div> </div> </div> </div> </div> </div>

#main{ padding:12px; } .offset-margin{ margin-top:-10px; } td{ padding-left:10px; } .description{ min-height:120px; margin-bottom:90px; } .blank{ border-top:solid 1px #eee; border-left:solid 1px #eee; min-height:120px; padding:0px !important; } .panel-body{ padding-bottom:0 !important; } .content{ margin-top:40px; padding-bottom:20px !important; } .table{ margin-bottom: 0px !important; }