"invoiii"
Bootstrap 4.1.1 Snippet by ravic9089

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <html> <head> <meta charset="utf-8"> <title>A simple, clean, and responsive HTML invoice template</title> </head> <body> <div class="invoice-box"> <table cellpadding="0" cellspacing="0"> <tr class="information"> <td class="title"> </td> <td></td> <td></td> <td> <img alt="logo" src="" style="width:100%; max-width:300px;"> <br/> <br/> Invoice #: 123<br> Created: January 1, 2015<br> Due: February 1, 2015 </td> </tr> <tr class="information"> <td> To,<br> John Doe<br> 12345 Sunny Road<br> Customer Bill<br/> 145221522232223 </td> <td></td> <td></td> <td> Acme Corp.<br> John Doe<br> john@example.com </td> </tr> <tr class="heading"> <td colspan="2"> <h2><center>QUOTATION</center></h2> </td> <td> QUOTATION No#<br/>CLIENT NAME</td> <td> QUOTATION No#<br/>CLIENT NAME </td> </tr> <tr class="heading1"> <td> Quantity </td> <td> Article Description </td> <td> Unit Price </td> <td> Total </td> </tr> <tr class="item"> <td> 12 </td> <td> Website design </td> <td> Rs 1200 </td> <td> Rs 7500.00 </td> </tr> <tr class="item"> <td> 12 </td> <td> Website design </td> <td> Rs 1200 </td> <td> Rs 7500.00 </td> </tr> <tr class=""> <td></td> <td></td> <td><b>Subtotal</b></td> <td> <b>Rs 385.00</b> </td> </tr> <tr class=""> <td></td> <td></td> <td><b>Subtotal</b></td> <td> <b>Rs 385.00</b> </td> </tr> <tr class=""> <td></td> <td></td> <td><b>Subtotal</b></td> <td> <b>Rs 385.00</b> </td> </tr> <tr class=""> <td></td> <td></td> <td colspan="2"> <b>Twenty Five Thousnd Twenty Six Only</b> </td> </tr> <tr class=""> <td>*Payment Method </td> <td></td> <td></td> <td> Approved By </td> </tr> <tr class=""> <td colspan="2">Please Make The Cheque To Primacy InFotech</td> <td></td> <td> <b>John Doe</b> </td> </tr> <tr class=""> <td></td> <td></td> <td></td> <td> <b>Managing Director</b> </td> </tr> </table> </div> </body> </html>
.invoice-box { max-width: 800px; margin: auto; padding: 30px; border: 1px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, .15); font-size: 16px; line-height: 24px; font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; color: #555; } .invoice-box table { width: 100%; line-height: inherit; text-align: center; } .invoice-box table td { padding: 5px; vertical-align: top; width:100px; text-align: center; } .invoice-box table tr td { text-align: center; } .invoice-box table tr.information td { text-align: left; font-size: 16px; font-weight: 500; } .invoice-box table tr.top table td { padding-bottom: 20px; } .invoice-box table tr.top table td.title { font-size: 45px; line-height: 45px; color: #ddd; } .invoice-box table tr.information table td { padding-bottom: 40px; text-align:left; } .invoice-box table tr.heading td { background: #eee; border-bottom: 1px solid #ddd; font-weight: bold; } .invoice-box table tr.item td { background:#f1f1f1; border-bottom: 1px solid #ddd; font-weight: bold; } .invoice-box table tr.details td { padding-bottom: 20px; } .invoice-box table tr.item td{ border-bottom: 1px solid #eee; } .invoice-box table tr.item.last td { border-bottom: none; } .invoice-box table tr.total td:nth-child(2) { border-top: 2px solid #eee; font-weight: bold; } @media only screen and (max-width: 600px) { .invoice-box table tr.top table td { width: 100%; display: block; text-align: center; } .invoice-box table tr.information table td { width: 100%; display: block; text-align: center; } } /** RTL **/ .rtl { direction: rtl; font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; } .rtl table { text-align: right; } .rtl table tr td:nth-child(2) { text-align: left; }

Related: See More

Vue Light Bootstrap Dashboard

Questions / Comments: