How to create invoice template bootstrap 

invoice template bootstrap is  the invoice template built on html, and css. Besides, the bootstrap library supports to create attractive and responsive invoices more easily. In this article, we will build an invoice step by step.

Idea

This simple invoice template will include the main information as below:

Invoice logo: This can be your company’s logo. You add it in order to promote your brand image.

Invoice number: This number is to distinguish one invoice with the others.

BILLING ADDRESS:  This is the address of goods’ sender

DELIVERY ADDRESS:  This is the address of goods’ receiver

Order detail: This includes product information such as name, quantity, price, shipping amount and a total amount of the invoice.

We will build an invoice template bootstrap being the same as the one in the below figure. Note that this is a simple example, you can absolutely create a more attractive invoice based on it because your creativity is unlimited.

invoice template bootstrap

Preparation

  • Install the editor software which is the most suitable for you such as php designer, notepad++, etc.
  • Download bootstrap library here  and unzip it
  • Download font awesome library here and unzip it

Implementation

Implement as the following order:

Step 1: Create the folder: invoice- template-bootstrap

Step 2: Copy the unzipped bootstrap folder and paste here: invoice- template- bootstrap

Step 3: Copy the unzipped font-awesome folder and paste in invoice- template- bootstrap

Step 4: In invoice- template- bootstrap, create a css folder. In the css folder, create style.css file. Make sure to create the exact following URL: invoice- template- bootstrap/css/style.css

Step 5: Open css file created in step 3 and add and save the below contents to style.css file.


.height {
min-height: 200px;
}
.icon {
font-size: 47px;
color: #5CB85C;
}
.iconbig {
font-size: 77px;
color: #5CB85C;
}

.table >tbody>tr> .emptyrow {
border-top: none;
}

.table >thead>tr> .emptyrow {
border-bottom: none;
}
.table >tbody>tr> .highrow {
border-top: 3px solid;
}
.logo img {width:100px}
.top-header {padding: 15px 0}

Step 6: Create index.html file in root folder of invoice- template- bootstrap

As the same time, make sure that invoice- template- bootstrap folder has the same structure as the figure below:

invoice template bootstrap

Step 7: Open index.html file, input and save the following contents


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="TRAN DINH HONG" />
<title>Simple Invoice Template | PrepBootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row top-header">
<div class="col-xs-2 col-md-3 col-lg-3 pull-left">
<a class="logo" href=""><img src="http://nikrasam.com/media/catalog/product/ct_a683348e01.png" /></a>
</div>
<div class="col-xs-10 col-md-9 col-lg-9 ">
<h2>Invoice number #6789</h2>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-md-3 col-lg-3 pull-left">
<div class="panel panel-default height">
<div class="panel-heading">BILLING ADDRESS</div>
<div class="panel-body">
<strong>John DOE</strong><br>
16, Main street 2nd floor<br>
Miami - 33133 Florida<br>
<strong>0102030405</strong><br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3 ">
<div class="panel panel-default height">
<div class="panel-heading">DELIVERY ADDRESS</div>
<div class="panel-body">
<strong>John DOE</strong><br>
16, Main street 2nd floor<br>
Miami - 33133 Florida<br>
<strong>0102030405</strong><br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<div class="panel panel-default height">
<div class="panel-heading">PAYMENT INFORMATION</div>
<div class="panel-body">
<strong>Card Name:</strong> Master Cart<br>
<strong>Card Number:</strong> ***** 556<br>
<strong>Exp Date:</strong> 08/22<br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<div class="panel panel-default height">
<div class="panel-heading">ORDER PREFERENCES</div>
<div class="panel-body">
<strong>Gift:</strong> No<br>
<strong>Express Delivery:</strong> Yes<br>
<strong>Insurance:</strong> No<br>
<strong>Coupon:</strong> No<br>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center"><strong>Order summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item Name</strong></td>
<td class="text-center"><strong>Item Price</strong></td>
<td class="text-center"><strong>Item Quantity</strong></td>
<td class="text-right"><strong>Total</strong></td>
</tr>
</thead>
<tbody>
<tr>
 

Now, you try running it on the browser, the result will be as the first figure. Its advantage is that it could be responsive with different screen sizes due to using Bootstrap library. In fact, using Bootstrap is seldom because most users do not know about programming. Therefore, many supporting tools which make people not have to calculate manually anymore appear. For instance, Pdf Invoice Template is the tool installed in Prestashop source code to support store owners to easily create their own invoices. You could try the demo here. I believe that with its wonderful features, you can save a lot of time spent on processing invoices.

Enjoy this blog? Please spread the word :)