Hello! Are you tired of creating invoices from scratch every time you need to bill your clients? Are you looking for a more efficient and streamlined billing process? Look no further than our Invoice Template UI built with Bootstrap!
Our Invoice Template UI is built with the latest Bootstrap technology, ensuring a responsive and intuitive design that looks great on any device. So why wait?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Apps Integrations List UI</title>
<!-- bootstrap 5 stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fontawesome 6 stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.bg-success{
background-color: #0086d9 !important;
}
.text-success{
color: #0086d9 !important;
}
.invoice-footer-company-details{
margin-left: -3rem;
margin-right: -3rem;
margin-bottom: -3rem;
}
</style>
</head>
<body>
<div class="container p-5">
<div class="invoic-warpper p-5 border shadow-sm rounded">
<div class="invoice-header">
<div class="row">
<div class="col-sm-6">
<img src="" alt="">
<div class="d-flex">
<div class="invoice-overview-wrapper bg-success px-5 py-3 text-center text-white">
<i class="fa-solid fa-file-invoice h1"></i>
<p class="text-uppercase mb-1">Invoice No</p>
<p class="">001/2023</p>
</div>
<div class="invoice-overview-wrapper bg-success px-3 py-3 text-center text-white">
<i class="fa-solid fa-calendar-days h1"></i>
<p class="text-uppercase mb-1">Invoice Date</p>
<p class="">18/02/2023</p>
</div>
<div class="invoice-overview-wrapper bg-success px-5 py-3 text-center text-white">
<i class="fa-solid fa-indian-rupee-sign h1"></i>
<p class="text-uppercase mb-1">Amount</p>
<p class=""><i class="fa-solid fa-indian-rupee-sign me-1"></i>10,000.00</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="text-end">
<h1 class="text-muted text-uppercase">Invoice</h1>
<div class="mt-5">
<small class="text-muted">Invoice To</small>
<p class="h5">Dinesh P</p>
<small class="text-muted">
No 15,
ABC street,<br>
AMG Nagar,
Karur - 600001,<br>
Tamilnadu,
India.
</small>
</div>
</div>
</div>
</div>
</div>
<div class="invoice-particulars mt-5">
<table class="table">
<thead class="bg-success text-white">
<th>Item Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Totoal Price</th>
</thead>
<tbody>
<tr>
<td>
<p class="mb-0">Product name goes here.</p>
<p class="mb-0 text-muted">Product description goes here.</p>
</td>
<td>1</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
</tr>
<tr>
<td>
<p class="mb-0">Product name goes here.</p>
<p class="mb-0 text-muted">Product description goes here.</p>
</td>
<td>1</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
</tr>
<tr>
<td>
<p class="mb-0">Product name goes here.</p>
<p class="mb-0 text-muted">Product description goes here.</p>
</td>
<td>1</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
</tr>
<tr>
<td>
<p class="mb-0">Product name goes here.</p>
<p class="mb-0 text-muted">Product description goes here.</p>
</td>
<td>1</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
</tr>
<tr>
<td>
<p class="mb-0">Product name goes here.</p>
<p class="mb-0 text-muted">Product description goes here.</p>
</td>
<td>1</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
<td><i class="fa-solid fa-indian-rupee-sign me-1"></i>1,000.00</td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<h4 class="text-uppercase mt-5">Ten thousand rupees only.</h4>
</td>
<td >Subtotal</td>
<td class="text-white bg-success"><i class="fa-solid fa-indian-rupee-sign me-1"></i>10,000.00</td>
</tr>
<tr>
<td >VAT</td>
<td class="text-white bg-success"><i class="fa-solid fa-indian-rupee-sign me-1"></i>100.00</td>
</tr>
<tr>
<td c>Discount</td>
<td class="text-white bg-success"><i class="fa-solid fa-indian-rupee-sign me-1"></i>100.00</td>
</tr>
<tr>
<td class="text-white bg-success">Total</td>
<td class="text-white bg-success"><i class="fa-solid fa-indian-rupee-sign me-1"></i>10,000.00</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-footer">
<div class="row">
<div class="col-sm-8">
<h5 class="text-uppercase mt-3">Payment method</h5>
<p class="mb-0 text-muted">Account: 2020XXXXXXX393</p>
<p class="mb-0 text-muted">SWFT: 2020393</p>
<p class="mb-0 text-muted">Paypal: p3203@payapl.com</p>
<h5 class="text-uppercase mt-3">Terms and conditions</h5>
<p class="mb-0 text-muted">Payment terms are net 30. Late payments will incur a 10% interest charge per month.</p>
</div>
<div class="col-sm-4">
<div class="text-center">
<img width="200" height="auto" src="" alt="">
<p>Autherized Signatrue</p>
</div>
</div>
</div>
<div class="bg-success invoice-footer-company-details mt-5 p-5">
<div class="row">
<div class="col-sm-3 text-center"><a class="text-white"><i class="fa-solid fa-globe me-2"></i>www.curfcode.com</a></div>
<div class="col-sm-3 text-center"><a class="text-white"><i class="fa-solid fa-phone me-2"></i>9585xxxx45</a></div>
<div class="col-sm-3 text-center"><a class="text-white"><i class="fa-solid fa-envelope me-2"></i>c ontact@curfcode.com</a></div>
<div class="col-sm-3 text-center"><a class="text-white"><i class="fa-solid fa-location-dot me-2"></i>Tamilnadu, India.</a></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
