hope this format will help you all.
{%- macro add_header(page_num, max_pages, doc, letter_head, no_letterhead) -%}
{% if letter_head and not no_letterhead %}
<div class="letter-head">{{ letter_head }}</div>
{% endif %}
{%- if doc.meta.is_submittable and doc.docstatus==0-%}
<div class="alert alert-info text-center">
<h4 style="margin: 0px;">{{ _("DRAFT") }}</h4></div>
{%- endif -%}
{%- if doc.meta.is_submittable and doc.docstatus==2-%}
<div class="alert alert-danger text-center">
<h4 style="margin: 0px;">{{ _("CANCELLED") }}</h4></div>
{%- endif -%}
{% if max_pages > 1 %}
<p class="text-right">{{ _("Page #{0} of {1}").format(page_num, max_pages) }}</p>
{% endif %}
{%- endmacro -%}
<div id="header-html" class="hidden-pdf">
{{ add_header(0,1,doc,letter_head, no_letterhead) }}
</div>
<div id="footer-html" class="visible-pdf">
{% if not no_letterhead and footer %}
{{ footer }}
{% endif %}
<p class="text-center small page-number visible-pdf">
{{ _("Page {0} of {1}").format('<span class="page"></span>', '<span class="topage"></span>') }}
</p>
</div>
<div class="row ">
<p><b> {{ doc.select_print_heading or "Sales Order" }} </b> | Ref: {{ doc.name or '' }} <spam class="pull-right">
{{ doc.get_formatted("transaction_date") or '' }}</spam></p>
</div>
<div class="row border body">
<div class="col-md-4 cell ">
<div class="row"><img src="http://teamcacm.com/skill-logo.png" class="c"></div>
<div class="row">
<p><b>VAT: </b>19841847029 </p>
<p><b>CST:</b> 19841847223</p>
<p><b>ST: </b>AGFPP8376HSD001</p>
<p><b>PAN:</b> AGFPP8376H</p>
</div>
</div>
<div class="col-md-4 cell"
style=" height:100%;border-left: 2px solid #3dacaa; border-right: 2px solid #3dacaa;">
<p class="b-bordered">Details of Receiver</p>
<p>To,</p>
<p><b> {{ doc.customer_name }}</b></p>
<p>{{doc.address_display}}</p>
</div>
<div class="col-md-4 cell ">
<p class="b-bordered">Details of Consignee </p>
<p>To,</p>
<p><b> {{ doc.customer_name }}</b></p>
<p>{{doc.shipping_address}}</p>
</div>
</div>
<div class="row">
<table class="table table-condensed table-hover table-bordered">
<tbody>
<tr>
<th>Sr</th>
<th>Item</th>
<th class="text-right">Qty</th>
<th class="text-right">Rate</th>
<th class="text-right">Amount</th>
</tr>
{%- for row in doc.items -%}
<tr>
<td style="width: 3%;">{{ row.idx }}</td>
<td style="width: 50%;">
<p>
<b>{{ row.item_name}}</b>
</p>
<p style="font-size: 10px;"> {{ row.description}}</p>
<p>{{ row.item_code}}</p>
</td>
<td style="width: 8%; text-align: right;">{{ row.qty }} {{ row.uom }}</td>
<td style="width: 15%; text-align: right;">{{
row.get_formatted("rate", doc) }}
</td>
<td style="width: 15%; text-align: right;">{{
row.get_formatted("amount", doc) }}
</td>
</tr>
{%- endfor -%}
<tr>
<td colspan="4"><b>{{ _("Net Total") }}</b></td>
<td style="width: 8%; text-align: right;"><b>{{ doc.get_formatted("total") or '' }} </b></td>
</tr>
{%- if doc.discount_amount -%}
<tr>
<td colspan="4"><b>{{ _("Discount") }}</b></td>
<td style="width: 8%; text-align: right;"><b>{{ doc.get_formatted("discount_amount") or '' }} </b></td>
</tr>
<tr>
<td colspan="4"><b>{{ _("Total After Discount") }}</b></td>
<td style="width: 8%; text-align: right;"><b>
₹ {{ doc.total-doc.discount_amount }} </b></td>
</tr>
{%- endif -%}
{%- for row in doc.taxes -%}
<tr>
<td colspan="4"> {{ row.description }}</td>
<td style="width: 8%; text-align: right;"><b>{{ row.get_formatted("tax_amount", doc) }} </b></td>
</tr>
{%- endfor -%}
<tr>
<td colspan="4"><b>{{ _("Total : ") }}{{ doc.in_words or '' }}</b></td>
<td style="width: 8%; text-align: right;"><b>{{ doc.get_formatted("rounded_total") or '' }} </b></td>
</tr>
</tbody>
</table>
</div>
<div class="row border body">
<div class="col-md-7 cell " style="text-align: left;">
{{ doc.terms or '' }}
</div>
<div class="col-md-5 cell"
style=" height:100%;border-left: 2px solid #3dacaa;text-align: center; ">
<p><img src="http://teamcacm.com/rohit-sign.png" class="c"></p>
<p>Rohit Koushik</p>
<p>Accountant</p>
<p> for Centre for Advanced Communication</p>
</div>
</div>
</div>
<div id="footer-html" class="has-variables">
{% if footer and not no_letterhead %}
<div id="htmlfooter">
{{ footer }}
</div>
{% endif %}
.border {
border: 2px solid #3dacaa;
}
.b-bordered:after {
content: “”;
display: block;
border-bottom: 2px solid #3dacaa;
margin: 0 -15px;
}
.body {
display: table;
width: 99%;
}
.cell {
float: none;
display: table-cell;
}
.row {
margin-right: 5px;
margin-left: 5px;
}
.table {
border: 2px solid #3dacaa;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #d0d5d8;
}
@media screen {
.has-variables{
display: none;
}
}
@media print {
.has-variables{
display:block;
}
}