Invoice

Bootstrap Invoice - free examples, templates & tutorial

Responsive Invoice with Bootstrap 5. Various examples like simple invoice, payment receipt, company invoice, invoice with images and many more.


Payment Receipt

Basic payment receipt template created with Bootstrap. A billing receipt should be generated for a customer after the purchase. You can use any of the free templates on this page to create your own invoice or receipt generator.

Thank for your purchase

  • John Doe
  • Invoice #12345
  • April 17 2021

Pro Package

$199.00


Consulting

$100.00


Support

$10.00


Total: $10.00


View in browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

        
            
          <div class="card">
            <div class="card-body mx-4">
              <div class="container">
                <p class="my-5 mx-5" style="font-size: 30px;">Thank for your purchase</p>
                <div class="row">
                  <ul class="list-unstyled">
                    <li class="text-black">John Doe</li>
                    <li class="text-muted mt-1"><span class="text-black">Invoice</span> #12345</li>
                    <li class="text-black mt-1">April 17 2021</li>
                  </ul>
                  <hr>
                  <div class="col-xl-10">
                    <p>Pro Package</p>
                  </div>
                  <div class="col-xl-2">
                    <p class="float-end">$199.00
                    </p>
                  </div>
                  <hr>
                </div>
                <div class="row">
                  <div class="col-xl-10">
                    <p>Consulting</p>
                  </div>
                  <div class="col-xl-2">
                    <p class="float-end">$100.00
                    </p>
                  </div>
                  <hr>
                </div>
                <div class="row">
                  <div class="col-xl-10">
                    <p>Support</p>
                  </div>
                  <div class="col-xl-2">
                    <p class="float-end">$10.00
                    </p>
                  </div>
                  <hr style="border: 2px solid black;">
                </div>
                <div class="row text-black">

                  <div class="col-xl-12">
                    <p class="float-end fw-bold">Total: $10.00
                    </p>
                  </div>
                  <hr style="border: 2px solid black;">
                </div>
                <div class="text-center" style="margin-top: 90px;">
                  <a><u class="text-info">View in browser</u></a>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
                </div>

              </div>
            </div>
          </div>
          
        
    

Company invoice

A proper invoice should include detailed company information like address or VAT ID. You should remeber about getting this details from your customers on the stage of designing a payment form, to make generating invoices easier after the purchase.

The template below includes an option to printm, and a visible payment status indacted by the use of a badge.

Invoice >> ID: #123-123


MDBootstrap.com

  • To: John Lorem
  • Street, City
  • State, Country
  • 123-456-789

Invoice

  • ID:#123-456
  • Creation Date: Jun 23,2021
  • Status: Unpaid
# Description Qty Unit Price Amount
1 Pro Package 4 $200 $800
2 Web hosting 1 $10 $10
3 Consulting 1 year $300 $300

Add additional notes and payment information

  • SubTotal$1110
  • Tax(15%)$111

Total Amount$1221


Thank you for your purchase

        
            
          <div class="card">
            <div class="card-body">
              <div class="container mb-5 mt-3">
                <div class="row d-flex align-items-baseline">
                  <div class="col-xl-9">
                    <p style="color: #7e8d9f;font-size: 20px;">Invoice >> <strong>ID: #123-123</strong></p>
                  </div>
                  <div class="col-xl-3 float-end">
                    <a data-mdb-ripple-init class="btn btn-light text-capitalize border-0" data-mdb-ripple-color="dark"><i
                        class="fas fa-print text-primary"></i> Print</a>
                    <a data-mdb-ripple-init class="btn btn-light text-capitalize" data-mdb-ripple-color="dark"><i
                        class="far fa-file-pdf text-danger"></i> Export</a>
                  </div>
                  <hr>
                </div>

                <div class="container">
                  <div class="col-md-12">
                    <div class="text-center">
                      <i class="fab fa-mdb fa-4x ms-0" style="color:#5d9fc5 ;"></i>
                      <p class="pt-0">MDBootstrap.com</p>
                    </div>

                  </div>


                  <div class="row">
                    <div class="col-xl-8">
                      <ul class="list-unstyled">
                        <li class="text-muted">To: <span style="color:#5d9fc5 ;">John Lorem</span></li>
                        <li class="text-muted">Street, City</li>
                        <li class="text-muted">State, Country</li>
                        <li class="text-muted"><i class="fas fa-phone"></i> 123-456-789</li>
                      </ul>
                    </div>
                    <div class="col-xl-4">
                      <p class="text-muted">Invoice</p>
                      <ul class="list-unstyled">
                        <li class="text-muted"><i class="fas fa-circle" style="color:#84B0CA ;"></i> <span
                            class="fw-bold">ID:</span>#123-456</li>
                        <li class="text-muted"><i class="fas fa-circle" style="color:#84B0CA ;"></i> <span
                            class="fw-bold">Creation Date: </span>Jun 23,2021</li>
                        <li class="text-muted"><i class="fas fa-circle" style="color:#84B0CA ;"></i> <span
                            class="me-1 fw-bold">Status:</span><span class="badge bg-warning text-black fw-bold">
                            Unpaid</span></li>
                      </ul>
                    </div>
                  </div>

                  <div class="row my-2 mx-1 justify-content-center">
                    <table class="table table-striped table-borderless">
                      <thead style="background-color:#84B0CA ;" class="text-white">
                        <tr>
                          <th scope="col">#</th>
                          <th scope="col">Description</th>
                          <th scope="col">Qty</th>
                          <th scope="col">Unit Price</th>
                          <th scope="col">Amount</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">1</th>
                          <td>Pro Package</td>
                          <td>4</td>
                          <td>$200</td>
                          <td>$800</td>
                        </tr>
                        <tr>
                          <th scope="row">2</th>
                          <td>Web hosting</td>
                          <td>1</td>
                          <td>$10</td>
                          <td>$10</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td>Consulting</td>
                          <td>1 year</td>
                          <td>$300</td>
                          <td>$300</td>
                        </tr>
                      </tbody>

                    </table>
                  </div>
                  <div class="row">
                    <div class="col-xl-8">
                      <p class="ms-3">Add additional notes and payment information</p>

                    </div>
                    <div class="col-xl-3">
                      <ul class="list-unstyled">
                        <li class="text-muted ms-3"><span class="text-black me-4">SubTotal</span>$1110</li>
                        <li class="text-muted ms-3 mt-2"><span class="text-black me-4">Tax(15%)</span>$111</li>
                      </ul>
                      <p class="text-black float-start"><span class="text-black me-3"> Total Amount</span><span
                          style="font-size: 25px;">$1221</span></p>
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-xl-10">
                      <p>Thank you for your purchase</p>
                    </div>
                    <div class="col-xl-2">
                      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary text-capitalize"
                        style="background-color:#60bdf3 ;">Pay Now</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          
        
    

Invoice with product image

Invoice with a photo and a short product specification using a subtle product card. This example also highlights the discount applied on the order.

Invoice >> ID: #123-123

Company Name

  • To: John Bootstrap
  • Street, City
  • State, Country
  • 123-456-789

Invoice

  • ID:#123-456
  • Creation Date: Jun 23,2021
  • Status: Unpaid

Custom suit

Size:8.5

Color:Gray

$1500$1050

You save 25%


Add additional notes and payment information

  • SubTotal$1050
  • Shipping$15

Total Amount$1065

        
            
          <div class="card">
            <div class="card-body">
              <div class="container mb-5 mt-3">
                <div class="row d-flex align-items-baseline">
                  <div class="col-xl-9">
                    <p style="color: #7e8d9f;font-size: 20px;">Invoice &gt;&gt; <strong>ID: #123-123</strong></p>
                  </div>
                </div>
                <div class="container">
                  <div class="col-md-12">
                    <div class="text-center">
                      <i class="far fa-building fa-4x ms-0" style="color:#8f8061 ;"></i>
                      <p class="pt-2">Company Name</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-xl-8">
                      <ul class="list-unstyled">
                        <li class="text-muted">To: <span style="color:#8f8061 ;">John Bootstrap</span></li>
                        <li class="text-muted">Street, City</li>
                        <li class="text-muted">State, Country</li>
                        <li class="text-muted"><i class="fas fa-phone"></i> 123-456-789</li>
                      </ul>
                    </div>
                    <div class="col-xl-4">
                      <p class="text-muted">Invoice</p>
                      <ul class="list-unstyled">
                        <li class="text-muted"><i class="fas fa-circle" style="color:#8f8061 ;"></i> <span
                            class="fw-bold">ID:</span>#123-456</li>
                        <li class="text-muted"><i class="fas fa-circle" style="color:#8f8061 ;"></i> <span
                            class="fw-bold">Creation Date: </span>Jun 23,2021</li>
                        <li class="text-muted"><i class="fas fa-circle" style="color:#8f8061;"></i> <span
                            class="me-1 fw-bold">Status:</span><span class="badge bg-warning text-black fw-bold">
                            Unpaid</span></li>
                      </ul>
                    </div>
                  </div>
                  <div class="row my-2 mx-1 justify-content-center">
                    <div class="col-md-2 mb-4 mb-md-0">
                      <div class="
                                  bg-image
                                  ripple
                                  rounded-5
                                  mb-4
                                  overflow-hidden
                                  d-block
                                  " data-ripple-color="light">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/new/img(4).webp"
                          class="w-100" height="100px" alt="Elegant shoes and shirt" />
                        <a href="#!">
                          <div class="hover-overlay">
                            <div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.2)"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="col-md-7 mb-4 mb-md-0">
                      <p class="fw-bold">Custom suit</p>
                      <p class="mb-1">
                        <span class="text-muted me-2">Size:</span><span>8.5</span>
                      </p>
                      <p>
                        <span class="text-muted me-2">Color:</span><span>Gray</span>
                      </p>
                    </div>
                    <div class="col-md-3 mb-4 mb-md-0">
                      <h5 class="mb-2">
                        <s class="text-muted me-2 small align-middle">$1500</s><span class="align-middle">$1050</span>
                      </h5>
                      <p class="text-danger"><small>You save 25%</small></p>
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-xl-8">
                      <p class="ms-3">Add additional notes and payment information</p>
                    </div>
                    <div class="col-xl-3">
                      <ul class="list-unstyled">
                        <li class="text-muted ms-3"><span class="text-black me-4">SubTotal</span>$1050</li>
                        <li class="text-muted ms-3 mt-2"><span class="text-black me-4">Shipping</span>$15</li>
                      </ul>
                      <p class="text-black float-start"><span class="text-black me-3"> Total Amount</span><span
                          style="font-size: 25px;">$1065</span></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>