<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-6"> <div class="invoice-title"> <h2>www.opensourcehelp.in</h2> <p>kolkata, 700051</p> <p>Phone No-9999999999</p> <p>Email:xyz@gmail.com</p> <p>State</p> <!-- <h3 class="pull-right">Order # 12345</h3>--> </div> </div> <div class="col-xs-6"> <img class="pull-right img-logo" src="" alt="logo"> </div> </div> <hr> <div class="row"> <div class="col-xs-6"> <address> <strong>Billed To:</strong><br> John Smith<br> <!-- 1234 Main<br> Apt. 4B<br> Springfield, ST 54321 --> </address> </div> <div class="col-xs-6 text-right"> <address> <strong>Invoice Nos:18</strong><br> <strong>Date:19-06-2019</strong><br> <!-- 1234 Main<br> Apt. 4B<br> Springfield, ST 54321 --> </address> </div> </div> <div class="row"> <div class="col-xs-6"> <!-- <address> <strong>Payment Method:</strong><br> Visa ending **** 4242<br> jsmith@email.com </address> --> </div> <div class="col-xs-6 text-right"> <!-- <address> <strong>Order Date:</strong><br> March 7, 2014<br><br> </address> --> </div> </div> </div> </div> <!-- <h3 class="panel-title"><strong>Order summary</strong></h3>--> <div class="table-responsive"> <table class="table table-condensed"> <thead> <tr> <th class="text-center"><strong>#</strong></th> <th><strong>Item Name</strong></th> <th><strong>HSC/SAC</strong></th> <th><strong>Quantity</strong></th> <th><strong>Unit</strong></th> <th><strong>Price/Units</strong></th> <th><strong>Discount</strong></th> <th><strong>Amounts</strong></th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>BS-200nnnnnnnnnnnnnnnnnnnnnnnnn</td> <td>     </td> <td> 1</td> <td>UNIT</td> <td>RS 1000000.00</td> <td>RS 32.00 <br/>(22.695%)</td> <td>$10.99</td> </tr> <tr> <td class="text-center">2</td> <td>BS-200nnnnnnnnnnnnnnnnnnnnnnnnn</td> <td>     </td> <td> 1</td> <td>UNIT</td> <td>RS 1000000.00</td> <td>RS 32.00 <br/>(22.695%)</td> <td>$10.99</td> </tr> <tr> <td></td> <td class="text-center"><h4>Total</h4></td> <td class="text-center">    </td> <td class="text-left"><h4>2</h4></td> <td class="text-center">    </td> <td class="text-center">    </td> <td class="text-left"><h4>Rs 32.00</h4></td> <td class="text-left"><h4>Rs 32.00</h4></td> </tr> <tr> <td class="thick-line"></td> <td class="thick-line"><strong>DESCRIPTION</strong></td> <td class="thick-line"></td> <td class="thick-line"></td> <td class="thick-line"></td> <td class="thick-line"></td> <td class="thick-line text-center"><strong>Subtotal</strong></td> <td class="thick-line text-right">$670.99</td> </tr> <tr> <td class="no-line"></td> <td class=" bg-lightblack">Ulhas</td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line text-center"><strong>Discount</strong></td> <td class="no-line text-right">$15</td> </tr> <tr> <td class="no-line"></td> <td><strong>INVOICE AMOUNT IN WORDS</strong></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line text-center bg-blue"><strong>Total</strong></td> <td class="no-line text-right bg-blue">$685.99</td> </tr> <tr> <td class="no-line"></td> <td class="no-line bg-lightblack">One Hundred and Fourty One Rupees Only</td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line text-center"><strong>Received</strong></td> <td class="no-line text-right">$685.99</td> </tr> <tr> <td class="no-line"></td> <td class="no-line"><strong>TERMS AND CONDITIONS</strong></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line text-center"><strong>Balance</strong></td> <td class="no-line text-right">$685.99</td> </tr> <tr> <td class="no-line"></td> <td class="no-line bg-lightblack">Thanks for doing business with us!</td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line">For www.muddiz.com</td> </tr> <tr> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line"><strong>Authorized Signatory</strong></td> </tr> </tbody> </table> </div> </div>

.invoice-title h2, .invoice-title h3 { display: inline-block; } .table > tbody > tr > .no-line { border-top: none; } .table > thead > tr > .no-line { border-bottom: none; } .table > tbody > tr > .thick-line { border-top: 2px solid; } .table > thead{ background-color: #2196F3; width: 100%; color: #fff; } .bg-blue{ background-color: #2196F3; color:#fff; } .bg-lightblack{ background-color: #f7f7f7; color:#000; } .img-logo{ margin-top:5px; width:350px; height:150px; } @media print{ body { -webkit-print-color-adjust: exact; } .table > thead >tr{ background-color: #2196F3 !important; -webkit-background-color: #2196F3; width: 100%; color: #fff; } .bg-blue{ background-color: #2196F3 !important; -webkit-background-color: #2196F3; color:#fff; } .bg-lightblack{ background-color: #f7f7f7 !important; -webkit-background-color: #f7f7f7; color:#000 !important; } }