"Invoice html"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Invoice</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <div class="container" style="border: 1px solid rgba(0,0,0,.125);border-radius: .25rem;"> <div class=""> <div class="card-body"> <!--<img src="https://www.abc.com/images/abc.svg" alt="logo" style="width:200px;">--> Logo <span class="float-right text-uppercase" style="font-size: 24px;font-weight: 500;"> Invoice</span> </div> <div class="card-body"> <!--from section--> <div class="row mb-4"> <div class="col-sm-6"> <h6 class="mb-3"> <strong>From:</strong></h6> <div> ABC Private Limited </div> <div>ABC Address </div> <div>Block A-1, ABC </div> <div>New Delhi – 110012 </div> <div class="row"> <div class="col-sm-2 pr-0"> <div class="text-uppercase mt-4"> <storng>PAN : </storng> </div> <div class="text-uppercase mt-4"> <storng>GST : </storng> </div> <div class="text-uppercase mt-4"> <storng>HSN/SAC : </storng> </div> </div> <div class="col-sm-10"> <div class="text-uppercase mt-4"> hgmhgngfbgfhhgfh </div> <div class="text-uppercase mt-4"> fbghgfhfghgjhgj </div> <div class="text-uppercase mt-4"> 4522 </div> </div> </div> </div> <div class="col-sm-6"> <div class="row" style="margin-top: 26px;"> <div class="col-sm-6"> <div> Date : </div> <div>Invoice No. :</div> <div>Purchase Order : </div> <div>Bill to :</div> <div>Student Name : </div> <div>Course : </div> <div>Address </div> <div> Customer's GST </div> <div> Account No. </div> <div> Terms & Conditions </div> </div> <div class="col-sm-6"> <div>16.06.2021</div> <div> KC/20-21/06/034 </div> <div> 000000000 </div> <div> Sachin Singh </div> <div> ABC </div> <div> Course –Basic</div> <div> Nagaon, Delhi </div> <div> N.A. </div> <div> N.A. </div> <div> N.A. </div> </div> </div> </div> </div> <!--table data --> <div class="table-responsive"> <table class="table table-borderless"> <thead style="border-bottom: 2px solid #ff9a31; border-top: 2px solid #ff9a31;"> <tr> <th width="70"> S. No. </th> <th width="200">Description</th> <th>Qty. (in months)</th> <th>Rate</th> <th>Discount</th> <th>Commission Charges@3%</th> <th>Total</th> <th>CGST @9%</th> <th>SGST @9%</th> <th>IGST @18%</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td style="padding-bottom: 300px;">1</td> <td>Course –Basic </td> <td>1</td> <td>1441.00</td> <td>-</td> <td>-</td> <td>1441.00</td> <td>-</td> <td>-</td> <td>259.00</td> <td>1700.00</td> </tr> <tr style="font-weight: bold;border-bottom: 2px solid #ff9a31; border-top: 2px solid #ff9a31;"> <td>Total</td> <td>-</td> <td>1</td> <td>1441.00</td> <td>-</td> <td>-</td> <td>1441.00</td> <td>-</td> <td>-</td> <td>259.00</td> <td>1700.00</td> </tr> </tbody> </table> </div> <!--Notes-section--> <div class="row mt-4"> <div class="col-sm-7"> <div> NOTES: </div> <div> Convenience fee is applied on total of each item </div> <div class="row" style="margin-top: 100px;"> <div class="col-sm-12"> <div> Please make the payment via wired transfer at </div> <div> Company’s Bank Details : </div> </div> <div class="col-sm-4"> <div> <storng>Beneficiary Name : </storng> </div> <div> <storng>Bank Name : </storng> </div> <div> <storng>A/c No. : </storng> </div> <div> <storng>Branch & IFSC Code : </storng> </div> </div> <div class="col-sm-8"> <div> ABC Pvt. Ltd </div> <div> IDFC Bank </div> <div> 55643566666 </div> <div> Karol Bagh & 21534454444 </div> </div> </div> </div> <div class="col-sm-5"> <div class="grand-total" style="border: 2px solid #25aff1;padding: 0px 2px;"> <div class="row"> <div class="col-sm-8"> <h6 class="mb-1"> <strong>Gross Total</strong></h6> <h6 class="mb-1"> <strong>Taxes</strong></h6> <h6 class="mb-1"> <strong>Other Charges (Rounding Off) </strong></h6> <h6 class="mb-1"> <strong>Total Invoice Value </strong></h6> </div> <div class="col-sm-4 text-right"> <h6 class="mb-1"> <strong>1441.00</strong></h6> <h6 class="mb-1"> <strong>259.00</strong></h6> <h6 class="mb-1"> <strong>-</strong></h6> <h6 class="mb-0"> <strong>1700.00</strong></h6> </div> </div> </div> </div> </div> <!--footer section--> <div class="row" style="margin-top: 100px;"> <div class="col-sm-12 text-center"> <h6 class="mb-1" style="border-bottom: 2px solid #25aff1;padding-bottom: 8px;"><strong>This is a computer generated invoice no signature required </strong></h6> <h6 class="mb-1"><strong>Head Office - 276, Road, Delhi, - 110001 </strong></h6> <h6 class="mb-1"><strong>Website : www.ABC.com E-mail : marketing@abc.com Facebook:https://www.facebook.com/abc/ </strong></h6> </div> </div> </div> </div> </div> </body> </html>

Related: See More

Now UI Kit Angular
Responsive Invoice template
BS4 clean & simple invoice template
Simple Invoice

Questions / Comments: