Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Basic HTML Invoice"
Bootstrap 3.2.0 Snippet by
MSBG
3.2.0
Preview
HTML
View Full Screen
Fork
Fork this
26.7K
 
5 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 bgcolor='#e4e4e4' text='#ff6633' link='#666666' vlink='#666666' alink='#ff6633' style='margin:0;font-family:Arial,Helvetica,sans-serif;border-bottom:1'> <table background='' bgcolor='#e4e4e4' width='100%' style='padding:20px 0 20px 0' cellspacing='0' border='0' align='center' cellpadding='0'> <tbody> <tr> <td> <table width='620' border='0' align='center' cellpadding='0' cellspacing='0' bgcolor='#FFFFFF' style='border-radius: 5px;'> <tbody> <tr> <td> <table width='620' border='0' cellspacing='0' cellpadding='0' style='border-bottom:solid 1px #e5e5e5'> <tbody> <tr> <td align='left' valign='top' style='padding:0px 5px 0px 5px' > <table height='20px' width='100%' border='0' cellpadding='0' cellspacing='0'> <tbody> <tr> <td height='10px' valign='top' style='color:#404041;font-size:13px;padding:5px 5px 0px 20px'> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:13px;padding:5px 5px 0px 20px'> <strong>Order number:</strong> 12345 </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:13px;padding:5px 5px 0px 20px'> <strong>Date:</strong> 25 August 2014 </td> </tr> </tbody> </table> </td> <td align='left' valign='top' style='padding:0px 5px 0px 5px'> <table height='146' width='100%' border='0' cellpadding='3' cellspacing='3' style='border-right:solid 1px #e5e5e5'> <tbody> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:15px 5px 0px 5px'> <strong>Company Address:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> 21 Random street<br> Random Area<br> Random Town<br> 1234<br> </p> </td> </tr> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:0px 5px 0px 5px'> <strong>Tel:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> <a href='tel:061%937%0266%' value='+27619370266' target='_blank'>123 456 7891</a><br> </p> </td> </tr> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:0px 5px 0px 5px'> <strong>Email:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> <a href='mailto:info@preview.co.za'>info@preview.com</a><br> </p> </td> </tr> </tbody> </table> </td> <td align='left' valign='top' style='padding:0px 5px 0px 5px'> <table height='146' width='100%' border='0' cellpadding='3' cellspacing='3' > <tbody> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:15px 5px 0px 5px'> <strong>Order by:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> Customer Name<br> <br> </p> </td> </tr> </tbody> </table> </td> <td align='left' valign='top' style='padding:0px 5px 0px 0px'> <table height='140' width='100%' border='0' cellpadding='3' cellspacing='3'> <tbody> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:15px 5px 0px 5px'> <strong>Deliver to:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:0px 5px 0px 5px'> <p> Customer Street<br> Customer Area<br> Customer Town<br> 1234<br> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td valign='top' style='color:#404041;line-height:16px;padding:25px 20px 0px 20px'> <p> <section style='position: relative;clear: both;margin: 5px 0;height: 1px;border-top: 1px solid #cbcbcb;margin-bottom: 25px;margin-top: 10px;text-align: center;'> <h3 align='center' style='margin-top: -12px;background-color: #FFF;clear: both;width: 180px;margin-right: auto;margin-left: auto;padding-left: 15px;padding-right: 15px; font-family: arial,sans-serif;'> <span>TAX INVOICE</span> </h3> </section> </p> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:25px 20px 0px 20px'> <p> <span><h2 style='color: #848484; font-family: arial,sans-serif; font-weight: 200;'>Hello from Company,</h2></span> </p> <p> Thanks for shopping at <a href='company.com<' target='_blank'>company.com</a>.<br> <br>We have received your order and we will notify you as soon as we have received your payment. </p> </td> </tr> <tr> <td style='color:#404041;font-size:12px;line-height:16px;padding:10px 16px 20px 18px'> <table width='100%' border='0' cellpadding='0' cellspacing='0' style='border-radius:5px;border:solid 1px #e5e5e5'> <tbody> <tr> <td> <table width='570' border='0' cellspacing='0' cellpadding='0'> <tbody> <tr> <td width='15'> </td> <td colspan='5' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 10px 3px 5px;border-bottom:solid 1px #e5e5e5'> <strong>Product</strong> </td> <td width='85' align='right' style='color:#404041;font-size:12px;line-height:16px;padding:5px 10px 3px 5px;border-bottom:solid 1px #e5e5e5'> <strong>Quantity</strong> </td> <td width='60' align='right' style='color:#404041;font-size:12px;line-height:16px;padding:5px 10px 3px 5px;border-bottom:solid 1px #e5e5e5'> <strong>Total</strong> </td> </tr> <tr> <td width='15'> </td> <td colspan='5' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:dashed 1px #e5e5e5'> Samsung SL-C410W Colour Laser Printer </td> <td width='85' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:dashed 1px #e5e5e5'> 1 </td> <td width='60' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:dashed 1px #e5e5e5'> $1,234.00 </td> </tr> <tr> <td width='15'> </td> <td width='100' align='left' valign='top' style='color:#404041;font-size:12px;padding:10px 0px 0px 5px'> <strong>Seller:</strong> </td> <td colspan='4' align='left' valign='top' width='115' style='color:#ff6600;font-size:12px;padding:10px 5px 0px 5px'> <a href='http://company.com' target='_blank'>company.com</a> </td> </tr> <tr> <td width='15'> </td> <td width='100' align='left' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 0px 5px'> <strong>Delivery method:</strong> </td> <td colspan='4' align='left' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 0px 5px'> Courier </td> </tr> <tr> <td width='15'> </td> <td width='100' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 5px 5px'> <strong>Delivery time:</strong> </td> <td colspan='4' align='left' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 5px 5px'> 1 - 2 Working Days </td> <td width='85' align='right'> </td> <td width='60' align='right'> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr align='left' > <td style='color:#404041;font-size:12px;line-height:16px;padding:10px 16px 20px 18px'> <table width='0' border='0' align='left' cellpadding='0' cellspacing='0'> <span><h2 style='color: #848484; font-family: arial,sans-serif; font-weight: 200;'>Banking Details</h2></span> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:0px 0px 3px 0px'> <strong>Bank:</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:0px 5px 3px 5px'> Bank 1 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Account Number:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> 123456789 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Branch:</strong> </td> <td width='120' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> Bank Area </td> </tr> </tbody> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>Bank:</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> Bank 2 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Account Number:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> 123456789 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Branch:</strong> </td> <td width='120' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> Bank Branch </td> </tr> </tbody> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>Bank:</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> Bank 3 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Account Number:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> 123456789 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Branch:</strong> </td> <td width='120' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> Bank Branch </td> </tr> </tbody> </table> <table width='0' border='0' align='right' cellpadding='0' cellspacing='0'> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>VAT</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> $123.00 </td> </tr> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>Sub-total:</strong> <span style='font-size:11px;color:#666666'>(VAT included)</span> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> $1,234.00 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px'> <strong>Delivery costs:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px'> $0.00 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;border-bottom:solid 1px #999999'> <strong>Order discount:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:solid 1px #999999'> $0.00 </td> </tr> <tr> <td align='left' valign='bottom' style='color:#404041;font-size:13px;line-height:16px;padding:5px 0px 3px 0px'> <strong>Grand Total:</strong> </td> <td width='62' align='right' valign='bottom' style='color:#339933;font-size:13px;line-height:16px;padding:5px 5px 3px 5px'> <strong>$1,234.00</strong> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table width='550' border='0' cellspacing='0' cellpadding='0'> <tbody> <tr> <td style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 5px 10px'> For more information on your order please call us on<strong> <a href='tel:123 467 8961' value='+123 467 8961' target='_blank'>123 467 8961</a></strong>, or mail us at <a href='mailto:orders@company.com'>orders@company.com</a> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table width='510' border='0' cellspacing='0' cellpadding='0'> <tbody> <tr> <td style='color:#404041;font-size:12px;line-height:16px;padding:5px 15px 10px 10px'> <p> Kind regards,<br> <strong>The <a href='#' target='_blank'>company.com</a> team</strong> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76