<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; }