Invoice

Bootstrap Invoice - examples & tutorial

Invoices Templates built with Bootstrap 5. Various examples like Simple invoice, company invoice, invoice with images and many more.


Basic Example

Basic invoice for the customer after the purchase

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 more extensive invoice with the possibility of printing and visible payment status

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 class="btn btn-light text-capitalize border-0" data-mdb-ripple-color="dark"><i class="fas fa-print text-primary"></i> Print</a>
                    <a  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" 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 photo and short product specification

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://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(4).webp" class="w-100"
                          height="100px" alt="" />
                        <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>