Bootstrap invoice template
As you know, you can create your own templates in Invoice Manager for your invoices. Here, we share with you the code for a template that we have created that uses Bootrsap classes and that will look very nice in your site if you're using Bootstrap too!
Just create a new template in your Invoice Manager backend, and copy/paste the code below into each part of the new template form. Remember to put your own company image logo instead of ours!
NOTE This template is designed for Invoice Manager version 2.1
Content
<div style="font-family: Helvetica;">
<div class="row-fluid">
<div class="span6"><img src="/{company_logo}" alt="" /><br /> <br />
<dl class="dl-horizontal">
<dt>[[FROM]]</dt>
<dd><strong>{from_name}</strong></dd>
<dt>[[ADDRESS]]</dt>
<dd><address>{from_address}</address></dd>
<dt>[[EMAIL]]</dt>
<dd>{from_email}</dd>
<dt>[[FISCAL_NUMBER]]</dt>
<dd>{from_num}</dd>
</dl>
</div>
<div class="span6">
<div class="well well-small" style="overflow: hidden;">
<dl class="dl-horizontal">
<dt>[[INVOICE_NUM]]</dt>
<dd>{invoice_num}</dd>
<dt>[[INVOICE_DATE]]</dt>
<dd>{invoice_date}</dd>
<dt>[[DUE_DATE]]</dt>
<dd>{invoice_duedate}</dd>
<dt>[[INVOICE_TOTAL]]</dt>
<dd>{total}</dd>
<dt>[[STATUS]]</dt>
<dd>{status}</dd>
</dl>
</div>
<div class="well well-small" style="overflow: hidden;">
<dl class="dl-horizontal">
<dt>[[BILL_TO]]</dt>
<dd><strong>{to_name}</strong></dd>
<dt>[[ADDRESS]]</dt>
<dd><address>{to_company} <br /> {to_address} <br /> {to_zipcode} {to_city} <br /> {to_state} {to_country}</address></dd>
<dt>[[EMAIL]]</dt>
<dd>{to_email}</dd>
<dt>[[VATID]]</dt>
<dd>{to_vatid}</dd>
<dt>[[PHONE]]</dt>
<dd>{to_phone}</dd>
</dl>
</div>
</div>
</div>
<h2 class="invoice_header">[[ITEMS]]</h2>
<table class="table table-striped" width="100%">
<thead>
<tr>
<th align="left">[[SKU]]</th>
<th align="left">[[DESCRIPTION]]</th>
<th style="text-align: right;" align="right">[[UNIT_COST]]</th>
<th style="text-align: right;" align="right">[[QUANTITY]]</th>
<th style="text-align: right;" align="right">[[DISCOUNT]]</th>
<th style="text-align: right;" align="right">[[TAX]]</th>
<th style="text-align: right;" align="right">[[PRICE]]</th>
</tr>
</thead>
<tbody>
<!--ITEMS-->
<tr>
<td>{sku}</td>
<td><strong>{name}</strong><br /> {desc}</td>
<td style="text-align: right;" align="right">{value}</td>
<td style="text-align: right;" align="right">{amount}</td>
<td style="text-align: right;" align="right">{discount}</td>
<td style="text-align: right;" align="right">{tax}</td>
<td style="text-align: right;" align="right">{item_total}</td>
</tr>
<!--/ITEMS-->
</tbody>
<tfoot>
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">[[DISCOUNT]]</td>
<td style="text-align: right;" align="right">{discount}</td>
</tr>
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">[[SUBTOTAL]]</td>
<td style="text-align: right;" align="right">{subtotal_items_less_total_discount}</td>
</tr>
<!--GROUPED_TAXES-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">{name} ({tax_value}% [[OF]] {calculated_on_amount})</td>
<td style="text-align: right;" align="right">{value}</td>
</tr>
<!--/GROUPED_TAXES-->
<!--GROUPED_TAXES_TOTAL-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">{name}</td>
<td style="text-align: right;" align="right">{value}</td>
</tr>
<!--/GROUPED_TAXES_TOTAL-->
<!--TAXES-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">{name} ({tax_value})</td>
<td style="text-align: right;" align="right">{value}</td>
</tr>
<!--/TAXES-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right"><strong>[[TOTAL]]</strong></td>
<td style="text-align: right;" align="right"><strong>{total}</strong></td>
</tr>
</tfoot>
</table>
<ul class="nav nav-tabs">
<li><a href="#payments_received" data-toggle="tab">[[PAYMENTS_RECEIVED]] {num_payments_received}</a></li>
<li class="active"><a href="#pending_payments" data-toggle="tab">[[PENDING_PAYMENTS]] {num_pending_payments}</a></li>
</ul>
<div class="tab-content">
<div id="payments_received" class="tab-pane ">
<table class="table table-striped " style="table-layout: fixed;" width="100%">
<thead>
<tr>
<th align="left">[[PAYMENT_DATE]]</th>
<th align="left">[[DESCRIPTION]]</th>
<th align="left">[[STATUS]]</th>
<th align="left"> </th>
<th style="text-align: right;" align="right">[[AMOUNT]]</th>
</tr>
</thead>
<tbody><!--PAYMENTS-->
<tr>
<td>{payment_datetime}</td>
<td>{description}</td>
<td>{payment_status}</td>
<td style="text-align: right;" align="right"><a class="btn btn-mini btn-default btn-xs" href="/{payment_link}"> [[VIEW_DETAILS]]</a></td>
<td style="text-align: right;" align="right">{amount}</td>
</tr>
<!--/PAYMENTS--></tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: right;" align="right"><strong>[[TOTAL_AMOUNT_PAID]]</strong></td>
<td style="text-align: right;" align="right"><strong>{total_payments}</strong></td>
</tr>
</tfoot>
</table>
</div>
<div id="pending_payments" class="tab-pane active">
<table class="table table-striped table-hover" style="table-layout: fixed;" width="100%">
<thead>
<tr>
<th align="left">[[DUE_DATE]]</th>
<th align="left">[[DESCRIPTION]]</th>
<th align="left">[[STATUS]]</th>
<th align="left"> </th>
<th style="text-align: right;" align="right">[[AMOUNT]]</th>
</tr>
</thead>
<tbody><!--PAYMENTS2-->
<tr>
<td>{duedate}</td>
<td>{description}</td>
<td>{payment_status}</td>
<td style="text-align: right;" align="right"><a class="btn btn-info btn-mini btn-xs" href="/{payment_link}" target="_parent"> [[PAY_NOW]]</a></td>
<td style="text-align: right;" align="right">{amount}</td>
</tr>
<!--/PAYMENTS2--></tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: right;" align="right"><strong>[[AMOUNT_OUTSTANDING]]</strong></td>
<td style="text-align: right;" align="right"><strong>{amount_outstanding}</strong></td>
</tr>
</tfoot>
</table>
</div>
</div>
<div style="padding: 2px;">[[NOTES]]</div>
<div class="muted" style="border-top: 1px solid #000; padding: 2px;"><small>{notes}</small></div>
</div>
Content for PDF and email
<div style="font-family: Helvetica; font-size: 12px;">
<table width="100%">
<tbody>
<tr>
<td valign="top" width="50%"><img src="/{company_logo}" alt="" /><br /> <br />
<table class="dl-table">
<tbody>
<tr>
<td class="invoice_label" valign="top">[[FROM]]</td>
<td valign="top"><strong>{from_name}</strong></td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[ADDRESS]]</td>
<td valign="top"><address>{from_address}</address></td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[EMAIL]]</td>
<td valign="top">{from_email}</td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[FISCAL_NUMBER]]</td>
<td valign="top">{from_num}</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="50%">
<div class="well well-small">
<table class="dl-table">
<tbody>
<tr>
<td class="invoice_label" valign="top">[[INVOICE_NUM]]</td>
<td valign="top">{invoice_num}</td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[INVOICE_DATE]]</td>
<td valign="top">{invoice_date}</td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[DUE_DATE]]</td>
<td valign="top">{invoice_duedate}</td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[INVOICE_TOTAL]]</td>
<td valign="top">{total}</td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[STATUS]]</td>
<td valign="top">{status}</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-small">
<table class="dl-table">
<tbody>
<tr>
<td class="invoice_label" valign="top">[[BILL_TO]]</td>
<td valign="top"><strong>{to_name}</strong></td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[ADDRESS]]</td>
<td valign="top"><address>{to_company} <br /> {to_address} <br /> {to_zipcode} {to_city} <br /> {to_state} {to_country}</address></td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[EMAIL]]</td>
<td valign="top">{to_email}</td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[VATID]]</td>
<td valign="top">{to_vatid}</td>
</tr>
<tr>
<td class="invoice_label" valign="top">[[PHONE]]</td>
<td valign="top">{to_phone}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<h2 class="invoice_header">[[ITEMS]]</h2>
<table class="table table-striped" width="100%">
<thead>
<tr>
<th align="left">[[SKU]]</th>
<th align="left">[[DESCRIPTION]]</th>
<th style="text-align: right;" align="right">[[UNIT_COST]]</th>
<th style="text-align: right;" align="right">[[QUANTITY]]</th>
<th style="text-align: right;" align="right">[[DISCOUNT]]</th>
<th style="text-align: right;" align="right">[[TAX]]</th>
<th style="text-align: right;" align="right">[[PRICE]]</th>
</tr>
</thead>
<tbody>
<!--ITEMS-->
<tr>
<td>{sku}</td>
<td><strong>{name}</strong><br /> {desc}</td>
<td style="text-align: right;" align="right">{value}</td>
<td style="text-align: right;" align="right">{amount}</td>
<td style="text-align: right;" align="right">{discount}</td>
<td style="text-align: right;" align="right">{tax}</td>
<td style="text-align: right;" align="right">{item_total}</td>
</tr>
<!--/ITEMS-->
</tbody>
<tfoot>
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">[[DISCOUNT]]</td>
<td style="text-align: right;" align="right">{discount}</td>
</tr>
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">[[SUBTOTAL]]</td>
<td style="text-align: right;" align="right">{subtotal_items_less_total_discount}</td>
</tr>
<!--GROUPED_TAXES-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">{name} ({tax_value}% [[OF]] {calculated_on_amount})</td>
<td style="text-align: right;" align="right">{value}</td>
</tr>
<!--/GROUPED_TAXES-->
<!--GROUPED_TAXES_TOTAL-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">{name}</td>
<td style="text-align: right;" align="right">{value}</td>
</tr>
<!--/GROUPED_TAXES_TOTAL-->
<!--TAXES-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right">{name} ({tax_value})</td>
<td style="text-align: right;" align="right">{value}</td>
</tr>
<!--/TAXES-->
<tr>
<td colspan="4"> </td>
<td style="text-align: right;" colspan="2" align="right"><strong>[[TOTAL]]</strong></td>
<td style="text-align: right;" align="right"><strong>{total}</strong></td>
</tr>
</tfoot>
</table>
<h2 class="invoice_header">[[PAYMENTS_RECEIVED]]</h2>
<table class="table table-striped " style="table-layout: fixed;" width="100%">
<thead>
<tr>
<th align="left">[[PAYMENT_DATE]]</th>
<th align="left">[[DESCRIPTION]]</th>
<th align="left">[[STATUS]]</th>
<th align="left"> </th>
<th style="text-align: right;" align="right">[[AMOUNT]]</th>
</tr>
</thead>
<tbody><!--PAYMENTS-->
<tr>
<td>{payment_datetime}</td>
<td>{description}</td>
<td>{payment_status}</td>
<td style="text-align: right;" align="right"><a class="btn btn-mini" href="/{payment_link}"> [[VIEW_DETAILS]]</a></td>
<td style="text-align: right;" align="right">{amount}</td>
</tr>
<!--/PAYMENTS--></tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: right;" align="right"><strong>[[TOTAL_AMOUNT_PAID]]</strong></td>
<td style="text-align: right;" align="right"><strong>{total_payments}</strong></td>
</tr>
</tfoot>
</table>
<h2 class="invoice_header">[[PENDING_PAYMENTS]]</h2>
<table class="table table-striped table-hover" style="table-layout: fixed;" width="100%">
<thead>
<tr>
<th align="left">[[DUE_DATE]]</th>
<th align="left">[[DESCRIPTION]]</th>
<th align="left">[[STATUS]]</th>
<th align="left"> </th>
<th style="text-align: right;" align="right">[[AMOUNT]]</th>
</tr>
</thead>
<tbody><!--PAYMENTS2-->
<tr>
<td>{duedate}</td>
<td>{description}</td>
<td>{payment_status}</td>
<td style="text-align: right;" align="right"><a class="btn btn-info btn-mini" href="/{payment_link}" target="_parent"> [[PAY_NOW]]</a></td>
<td style="text-align: right;" align="right">{amount}</td>
</tr>
<!--/PAYMENTS2--></tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: right;" align="right"><strong>[[AMOUNT_OUTSTANDING]]</strong></td>
<td style="text-align: right;" align="right"><strong>{amount_outstanding}</strong></td>
</tr>
</tfoot>
</table>
<div style="padding: 2px;">[[NOTES]]</div>
<div class="muted" style="border-top: 1px solid #000; padding: 2px;"><small>{notes}</small></div>
</div>
Styles
@page { margin: 0px; }
body { margin: 0px; }
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
dl{margin-bottom:20px;}
dt,dd{line-height:20px;}
dt{font-weight:bold;}
dd{margin-left:10px;}
.dl-horizontal{*zoom:1;}.dl-horizontal:before,.dl-horizontal:after{display:table;content:"";line-height:0;}
.dl-horizontal:after{clear:both;}
.dl-horizontal dt{float:left;width:120px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dl-horizontal dd{margin-left:140px;}
hr{margin:20px 0;border:0;border-top:1px solid #eeeeee;border-bottom:1px solid #ffffff;}
abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999999;}
abbr.initialism{font-size:90%;text-transform:uppercase;}
q:before,q:after,blockquote:before,blockquote:after{content:"";}
address{display:block;margin-bottom:20px;font-style:normal;line-height:20px;}
table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0;}
.table{width:100%;margin-bottom:20px;}.table th,.table td{padding:8px;line-height:20px;text-align:left;vertical-align:top;border-top:1px solid #dddddd;}
.table th{font-weight:bold;}
.table thead th{vertical-align:bottom;}
.table caption+thead tr:first-child th,.table caption+thead tr:first-child td,.table colgroup+thead tr:first-child th,.table colgroup+thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td{border-top:0;}
.table tbody+tbody{border-top:2px solid #dddddd;}
.table .table{background-color:#ffffff;}
.table-condensed th,.table-condensed td{padding:4px 5px;}
.table-bordered{border:1px solid #dddddd;border-collapse:separate;*border-collapse:collapse;border-left:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.table-bordered th,.table-bordered td{border-left:1px solid #dddddd;}
.table-bordered caption+thead tr:first-child th,.table-bordered caption+tbody tr:first-child th,.table-bordered caption+tbody tr:first-child td,.table-bordered colgroup+thead tr:first-child th,.table-bordered colgroup+tbody tr:first-child th,.table-bordered colgroup+tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td{border-top:0;}
.table-bordered thead:first-child tr:first-child>th:first-child,.table-bordered tbody:first-child tr:first-child>td:first-child,.table-bordered tbody:first-child tr:first-child>th:first-child{-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;}
.table-bordered thead:first-child tr:first-child>th:last-child,.table-bordered tbody:first-child tr:first-child>td:last-child,.table-bordered tbody:first-child tr:first-child>th:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;}
.table-bordered thead:last-child tr:last-child>th:first-child,.table-bordered tbody:last-child tr:last-child>td:first-child,.table-bordered tbody:last-child tr:last-child>th:first-child,.table-bordered tfoot:last-child tr:last-child>td:first-child,.table-bordered tfoot:last-child tr:last-child>th:first-child{-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
.table-bordered thead:last-child tr:last-child>th:last-child,.table-bordered tbody:last-child tr:last-child>td:last-child,.table-bordered tbody:last-child tr:last-child>th:last-child,.table-bordered tfoot:last-child tr:last-child>td:last-child,.table-bordered tfoot:last-child tr:last-child>th:last-child{-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
.table-bordered tfoot+tbody:last-child tr:last-child td:first-child{-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;}
.table-bordered tfoot+tbody:last-child tr:last-child td:last-child{-webkit-border-bottom-right-radius:0;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;}
.table-bordered caption+thead tr:first-child th:first-child,.table-bordered caption+tbody tr:first-child td:first-child,.table-bordered colgroup+thead tr:first-child th:first-child,.table-bordered colgroup+tbody tr:first-child td:first-child{-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;}
.table-bordered caption+thead tr:first-child th:last-child,.table-bordered caption+tbody tr:first-child td:last-child,.table-bordered colgroup+thead tr:first-child th:last-child,.table-bordered colgroup+tbody tr:first-child td:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;}
.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:#f9f9f9;}
.table-hover tbody tr:hover>td,.table-hover tbody tr:hover>th{background-color:#f5f5f5;}
table td[class*="span"],table th[class*="span"],.row-fluid table td[class*="span"],.row-fluid table th[class*="span"]{display:table-cell;float:none;margin-left:0;}
.table td.span1,.table th.span1{float:none;width:44px;margin-left:0;}
.table td.span2,.table th.span2{float:none;width:124px;margin-left:0;}
.table td.span3,.table th.span3{float:none;width:204px;margin-left:0;}
.table td.span4,.table th.span4{float:none;width:284px;margin-left:0;}
.table td.span5,.table th.span5{float:none;width:364px;margin-left:0;}
.table td.span6,.table th.span6{float:none;width:444px;margin-left:0;}
.table td.span7,.table th.span7{float:none;width:524px;margin-left:0;}
.table td.span8,.table th.span8{float:none;width:604px;margin-left:0;}
.table td.span9,.table th.span9{float:none;width:684px;margin-left:0;}
.table td.span10,.table th.span10{float:none;width:764px;margin-left:0;}
.table td.span11,.table th.span11{float:none;width:844px;margin-left:0;}
.table td.span12,.table th.span12{float:none;width:924px;margin-left:0;}
.table tbody tr.success>td{background-color:#dff0d8;}
.table tbody tr.error>td{background-color:#f2dede;}
.table tbody tr.warning>td{background-color:#fcf8e3;}
.table tbody tr.info>td{background-color:#d9edf7;}
.table-hover tbody tr.success:hover>td{background-color:#d0e9c6;}
.table-hover tbody tr.error:hover>td{background-color:#ebcccc;}
.table-hover tbody tr.warning:hover>td{background-color:#faf2cc;}
.table-hover tbody tr.info:hover>td{background-color:#c4e3f3;}
.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
.well-large{padding:24px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.well-small{padding:9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
table.dl-table td{line-height:20px;}
td.invoice_label{text-align:right;font-weight:bold;
width:120px; padding-right:20px;line-height:20px;}