Skip to content

Instantly share code, notes, and snippets.

@shrestharikesh

shrestharikesh/Html Bootstrap Invoice Template

Last active March 16, 2020 05:58
Show Gist options
  • Save shrestharikesh/4f57ae47069c578832bc577191982e9c to your computer and use it in GitHub Desktop.
Save shrestharikesh/4f57ae47069c578832bc577191982e9c to your computer and use it in GitHub Desktop.
Download ZIP
Printable Invoice design with bootstrap 4
Raw
Html Bootstrap Invoice Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="https://bcassetcdn.com/social/8339hkwze8/preview.png" alt="" style="max-width: 100px">
<br>ABC Private Limited
<br>Address line
<br>Tel:098765432
</div>
<div class="col-md-6 text-right mt-4">
Date:2020-01-01 <br>
Invoice # 424773
</div>
<div class="col-md-12 text-center">
<h1>Receipt</h1>
<table class="table table-bordered">
<thead>
<tr>
<td>S.No</td>
<td>Fee Type</td>
<td>Amount</td>
<td>Discount</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Item 1</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>2.</td>
<td>Item 2</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 3</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 4</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td colspan="4" class="text-right">Total</td>
<td>3600</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="https://bcassetcdn.com/social/8339hkwze8/preview.png" alt="" style="max-width: 100px">
<br>ABC Private Limited
<br>Address line
<br>Tel:098765432
</div>
<div class="col-md-6 text-right mt-4">
Date:2020-01-01 <br>
Invoice # 424773
</div>
<div class="col-md-12 text-center">
<h1>Receipt</h1>
<table class="table table-bordered">
<thead>
<tr>
<td>S.No</td>
<td>Fee Type</td>
<td>Amount</td>
<td>Discount</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Item 1</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>2.</td>
<td>Item 2</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 3</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 4</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td colspan="4" class="text-right">Total</td>
<td>3600</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="https://bcassetcdn.com/social/8339hkwze8/preview.png" alt="" style="max-width: 100px">
<br>ABC Private Limited
<br>Address line
<br>Tel:098765432
</div>
<div class="col-md-6 text-right mt-4">
Date:2020-01-01 <br>
Invoice # 424773
</div>
<div class="col-md-12 text-center">
<h1>Receipt</h1>
<table class="table table-bordered">
<thead>
<tr>
<td>S.No</td>
<td>Fee Type</td>
<td>Amount</td>
<td>Discount</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Item 1</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>2.</td>
<td>Item 2</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 3</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 4</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td colspan="4" class="text-right">Total</td>
<td>3600</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="https://bcassetcdn.com/social/8339hkwze8/preview.png" alt="" style="max-width: 100px">
<br>ABC Private Limited
<br>Address line
<br>Tel:098765432
</div>
<div class="col-md-6 text-right mt-4">
Date:2020-01-01 <br>
Invoice # 424773
</div>
<div class="col-md-12 text-center">
<h1>Receipt</h1>
<table class="table table-bordered">
<thead>
<tr>
<td>S.No</td>
<td>Fee Type</td>
<td>Amount</td>
<td>Discount</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Item 1</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>2.</td>
<td>Item 2</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 3</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td>1.</td>
<td>Item 4</td>
<td>1000</td>
<td>100</td>
<td>900</td>
</tr>
<tr>
<td colspan="4" class="text-right">Total</td>
<td>3600</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment