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
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
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>
Company Invoice with logo
Invoice with a company logo, a clear table and a place for a signature
- Company
- 123, Elm Street
- 123-456-789
- mail@mail.com
Invoice
123456789
Description | Amount |
---|---|
Samsung TV | 500,00 |
JBL Speaker | 300,00 |
Macbook Air | 1000,00 |
Iphone 11 PRO | 5000,00 |
- Total Amount: 6850,00
- Discount: 500,00
- Shippment: 500,00
Total: 6350,00
Date: 23 June 20221
Signature:
<div class="card">
<div class="card-header bg-black"></div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-xl-12">
<i class="far fa-building text-danger fa-6x float-start" ></i>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<ul class="list-unstyled float-end">
<li style="font-size: 30px; color: red;">Company</li>
<li>123, Elm Street</li>
<li>123-456-789</li>
<li>mail@mail.com</li>
</ul>
</div>
</div>
<div class="row text-center">
<h3 class="text-uppercase text-center mt-3" style="font-size: 40px;">Invoice</h3>
<p>123456789</p>
</div>
<div class="row mx-3">
<table class="table">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samsung TV</td>
<td><i class="fas fa-dollar-sign"></i> 500,00</td>
</tr>
<tr>
<td>JBL Speaker</td>
<td><i class="fas fa-dollar-sign"></i> 300,00</td>
</tr>
<tr>
<td>Macbook Air</td>
<td><i class="fas fa-dollar-sign"></i> 1000,00</td>
</tr>
<tr>
<td>Iphone 11 PRO</td>
<td><i class="fas fa-dollar-sign"></i> 5000,00</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-xl-8">
<ul class="list-unstyled float-end me-0">
<li><span class="me-3 float-start">Total Amount:</span><i class="fas fa-dollar-sign"></i> 6850,00</li>
<li> <span class="me-5">Discount:</span><i class="fas fa-dollar-sign"></i> 500,00</li>
<li><span class="float-start" style="margin-right: 35px;">Shippment: </span><i class="fas fa-dollar-sign"></i> 500,00</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-xl-8" style="margin-left:60px">
<p class="float-end" style="font-size: 30px; color: red; font-weight: 400;font-family: Arial, Helvetica, sans-serif;">Total:
<span><i class="fas fa-dollar-sign"></i> 6350,00</span></p>
</div>
</div>
<div class="row mt-2 mb-5">
<p class="fw-bold">Date: <span class="text-muted">23 June 20221</span></p>
<p class="fw-bold mt-3">Signature:</p>
</div>
</div>
</div>
<div class="card-footer bg-black"></div>
</div>
Invoice with product image
Invoice with photo and short product specification
Invoice >> ID: #123-123
<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>
<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>