"Bootsrap Invoice"
Bootstrap 4.1.1 Snippet by Mohd Kadir

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> <title>Invoice</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="row justify-content-center"> <div class="col-8"> <div class="card"> <div class="card-body"> <h3 class="text-center font-weight-bold mb-1">Prem Prakhash</h3> <p class="text-center font-weight-bold mb-0">GSTIN No.: 09AANFB4888NIZH</p> <p class="text-center font-weight-bold"><small class="font-weight-bold">Phone No.: 0120-4571570/7042344100</small></p> <div class="row pb-2 p-2"> <div class="col-md-6"> <p class="mb-0"><strong>Invoice Number</strong>: IN0010012804</p> <p><strong>Name</strong>: IN0010012804</p> </div> <div class="col-md-6 text-right"> <p class="mb-0"><strong>Invoice Date</strong>: 06-April-2020 20:30:34</p> <p><strong>Phone</strong>: 9643208548</p> </div> </div> <div class="table-responsive"> <table class="table table-bordered mb-0"> <thead> <tr> <th class="text-uppercase small font-weight-bold">SR No.</th> <th class="text-uppercase small font-weight-bold">Item</th> <th class="text-uppercase small font-weight-bold">Qty</th> <th class="text-uppercase small font-weight-bold">Unit Price</th> <th class="text-uppercase small font-weight-bold">Desc</th> <th class="text-uppercase small font-weight-bold">Tax %</th> <th class="text-uppercase small font-weight-bold">Tax Amt.</th> <th class="text-uppercase small font-weight-bold">Total</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>10 Get item</td> <td>23</td> <td>100.00</td> <td>00</td> <td>GST 9%</td> <td>800</td> <td>1800</td> </tr> <tr> <td>1</td> <td>10 Get item</td> <td>23</td> <td>100.00</td> <td>00</td> <td>GST 9%</td> <td>800</td> <td>1800</td> </tr> <tr> <td>1</td> <td>10 Get item</td> <td>23</td> <td>100.00</td> <td>00</td> <td>GST 9%</td> <td>800</td> <td>1800</td> </tr> </tbody> <tfoot class="font-weight-bold small"> <tr> <td colspan="2">Total</td> <td>1800</td> <td> </td> <td>0.00</td> <td> </td> <td>900</td> <td>1000</td> </tr> <tr> <td colspan="8">Amount in words: Rs One Thusend Five Hundrate only <span class="float-right">Balance:2000</span> </td> </tr> <tr> <td colspan="8">Card: 20000</td> </tr> </tfoot> </table> </div><!--table responsive end--> <p class="">Thank you for choosing our service.We look forward to meet you again</p> <p>Money once paid will not we refunded. However, it can be abjected towards any services</p> <p class="font-weight-bold small mt-0">Other T &C Apply</p> </div> </div> </div> </div> </div> </body> </html>
.table td, .table th { padding: 0.5rem; vertical-align: top; border-top: 1px solid #dee2e6; font-size: 14px; }

Related: See More

Vuetify Material Dashboard
Responsive Invoice template
BS4 clean & simple invoice template
Simple Invoice

Questions / Comments: