<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
<div class="row ">
<!-- business information here -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center top-name">
<h1 class="text-center heading-size">
<!-- Shop & Location Name -->
Location Name
</h1>
<!-- Address -->
<h4>
<small class="text-center addres-size">
Location Address
<br>
Location Phone
</small>
</h4>
<!-- Title of receipt -->
<!-- Invoice number, Date -->
<p style="width: 100% !important" class="word-wrap">
<span class="pull-left text-left word-wrap">
<!-- customer info -->
<b>
customer Name
</b>
<br>
customer Address
<br>
customer Phone
</span>
<span class="">
<button onclick="javascript:window.print()" class=" btn btn-info btn-print">Print</button>
</span>
<span class="pull-right">
<b>
Bill No.
2020/0023
</b>
<!-- Table information-->
<br>
Date 04-Feb-2020
<!-- Waiter info -->
</span>
</p>
</div>
<!-- /.col -->
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 items-div" style=" border: 0px solid ;">
<table class="table table-responsive table-bordered" frame="hsides">
<thead>
<tr>
<th>#</th>
<th>Item Name</th>
<th> Qty</th>
<th style=" margin: 0;
padding-left: 3px; padding-right: 3px; width: 1%; ">Bonus</th>
<th>Rate</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr style="line-height:12px!important;">
<td>
1 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>10</td>
<td> </td>
<td>119.00</td>
<td>1,190.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
2 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>10</td>
<td> </td>
<td>55.00</td>
<td>550.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
3 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>25</td>
<td> </td>
<td>55.00</td>
<td>1,375.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
4 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>10</td>
<td> </td>
<td>950.00</td>
<td>9,500.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
5 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>10</td>
<td> </td>
<td>211.00</td>
<td>2,110.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
6 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>1</td>
<td> </td>
<td>345.00</td>
<td>345.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
7 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>1</td>
<td> </td>
<td>180.00</td>
<td>180.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
8 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>1</td>
<td> </td>
<td>500.00</td>
<td>500.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
9 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>1</td>
<td> </td>
<td>39.00</td>
<td>39.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
10 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>2</td>
<td> </td>
<td>2,248.00</td>
<td>4,496.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
11 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>2</td>
<td> </td>
<td>1,295.00</td>
<td>2,590.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
12 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>2</td>
<td> </td>
<td>1,260.00</td>
<td>2,520.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
13 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>1</td>
<td> </td>
<td>1,177.00</td>
<td>1,177.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
14 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>1</td>
<td> </td>
<td>1,820.00</td>
<td>1,820.00</td>
</tr>
<tr style="line-height:12px!important;">
<td>
14 </td>
<td style="word-break: break-all;">
Product name
</td>
<td>1</td>
<td> </td>
<td>1,820.00</td>
<td>1,820.00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pagebreak footer-size row" style=" width: 100%;
position: relative;
margin-bottom: 0 !important;
font-size: 10pt;
page-break-inside: avoid !important;
page-break-before: auto !important;">
<!--<div class="col-xs-2"></div>-->
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
Total Items:<b> 14 </b>
<br>
<br>
<br>
Amount in words:
<br>
<b> Twenty-eight thousand three hundred sixty-seven ruppees only</b>
</div>
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 pull-right">
<table class="table table-condensed">
<tbody>
<tr>
<th style="">
Bill Amount:
</th>
<td class="text-align-class">
₨ 28,392.00
</td>
</tr>
<!-- Shipping Charges -->
<!-- Discount -->
<tr>
<th>
Discount
</th>
<td class="text-align-class">
(-) ₨ 25.00
</td>
</tr>
<!-- Tax -->
<!-- Total -->
<tr>
<th>
Total:
</th>
<td class="text-align-class">
₨ 28,367.00
</td>
</tr>
<!-- Total -->
<tr>
<th>
Previous Balance
</th>
<td class="text-align-class">
₨ 0.00
</td>
</tr>
<tr>
<th>
Grand Total
</th>
<td class="text-align-class">₨
28,367.00
</td>
</tr>
<!-- Total Paid-->
<tr>
<th>
Total Paid
</th>
<td class="text-align-class">
₨ 1,400.00
</td>
</tr>
<!-- Total Due-->
<tr>
<th>
Balance Left
</th>
<td class="text-align-class">
₨ 26,967.00
</td>
</tr>
</tbody>
</table>
<p>comments</p>
</div>
</div>
<div class="row ">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p><span style="font-size:11px"><strong><span style="font-family:Arial,Helvetica,sans-serif">
footer statement</span></strong></span></p>
</div>
</div>
@page {
/* size: A5 */
}
.text-align-class {
text-align: right
}
* {
border: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit !important;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: top;
}
.heading-size {
/*font-size: 16px!important;*/
font-family: initial !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
font-weight: 500 !important;
line-height: 0.1 !important;
color: inherit !important;
}
.table-size {
font-size: 12px !important;
}
.footer-size {
font-size: 12px !important;
}
