Today, We want to share with you invoice html template bootstrap.In this post we will show you invoice page also responsive and supported all the browsers, hear for Invoice page design using html,css and bootstrap we will give you demo and example for implement.In this post, we will learn about Create Order And Invoice Using Magento with an example.

Bootstrap invoice Examples

Contents

Also Read : invoice generator & receipt maker
Example 1: index.html

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12 brandSection">
<div class="row">
<div class="col-md-12 col-sm-12 header">
<div class="col-md-3 col-sm-3 partSectionLt">
<h2>Brand Logo</h2>
</div>
<div class="col-md-9 col-sm-9 partSectionRT">

www.pakainfo.com

[email protected]

(000)666 XXX 89

</div>
</div>
<div class="col-md-12 col-sm-12 content">
<h2>Invoice<strong> 0007</strong></h2>
01 April,2022

Payment due by 25 May 2022

</div>
<div class="col-md-12 col-sm-12 panelPart">
<div class="row">
<div class="col-md-6 col-sm-6 panelPart">
<div class="panel panel-default">
<div class="panel-body">FROM</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>LOGO</h2>
</div>
<div class="col-md-8 col-sm-6 col-xs-6">

Virat Kohali

Rogit Sharma

Sachin Tendulkar

Yuvraj Shinh

</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 panelPart">
<div class="panel panel-default">
<div class="panel-body">TO</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6">
<h2>LOGO</h2>
</div>
<div class="col-md-8 col-sm-6 col-xs-6">

Depali Joshi

Meera Sidhupara

Bhavika Pethani

Dipti Shah

</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 tableSection">
<h2>ITEMS</h2>
<table class="table text-center">
<thead>
<tr class="tableHead">
<th style="width: 30px;">Quantity</th>
<th>Description</th>
<th style="width: 100px;">Unit Price</th>
<th style="width: 100px; text-align: center;">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>New Apple iPhone 11 (64GB) - Black</td>
<td>$100</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Apple iPhone 11 (White, 64 GB)</td>
<td>$100</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>Apple iPhone SE (Black, 64 GB) (Includes EarPods, Power Adapter)</td>
<td>$100</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Apple iPhone XR (Black, 128 GB) (Includes EarPods, Power Adapter)</td>
<td>$100</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>OnePlus 8T 5G (Lunar Silver, 8GB RAM, 128GB Storage)</td>
<td>$100</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>COMORO 11D Tempered Glass Screen Protector for Samsung Oneplus 8T</td>
<td>$100</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 col-sm-12 lastSectionleft ">
<div class="row">
<div class="col-md-8 col-sm-6 Sectionleft">

<i>Special Notes</i>

<i>Tamilrockers is an Indian piracy website that provides access to download free movies online.</i>

</div>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-body lastPanel">AMOUNT DUE</div>
<div class="panel-footer lastFooter">
<div class="row">
<div class="col-md-5 col-sm-6 col-xs-6 panelLastLeft">

SUBTOTAL

TAX

SHIPPING

TOTAL

</div>
<div class="col-md-7 col-sm-6 col-xs-6 panelLastRight">

$80

$80

$80

<strong>$240</strong>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS Code

body{
background-color: #F6F6F6;
}
.brandSection{
background-color: #3B99B3;
border:1px solid #417482;
}
.partSectionLt h2{
color:#fff;
margin: 0px;
font-size:28px;
}
.header{
border-bottom: 2px solid #417482;
padding: 10px;
}
.partSectionRT p{
margin: 0px;
font-size:10px;
color:#88CFE3;
text-align: right;
}
.contentSection{
background-color: #fff;
padding: 0px;
}
.content{
background-color: #fff;
padding:20px;
}
.content h2{
font-size:22px;
margin:0px;
}
.content p{
margin: 0px;
font-size: 11px;
}
.content span{
font-size: 11px;
color:#F2635F;
}
.panelPart{
background-color: #fff;
}
.panel-body{
background-color: #3BA4C2;
color:#fff;
padding: 5px;
}
.panel-footer {
background-color:#fff;
}
.panel-footer h2{
font-size: 20px;
padding:15px;
border:1px dotted #DDDDDD;
}
.panel-footer p{
font-size:13px;
background-color: #F6F6F6;
padding: 5px;
}
.tableSection{
background-color: #fff;
}
.tableSection h2{
font-size:18px;
margin:0px;
}
th{
background-color: #383C3D;
color:#fff;
}
.table{
padding-bottom: 10px;
margin:0px;
border:1px solid #DDDDDD;
}
td:nth-child(2){
text-align: left;
}
td {
height: 100%;
}
.bg {
background-color: #f00;
width: 100%;
height: 100%;
display: block;
}
.lastSectionleft{
background-color: #fff;
padding-top:20px;
}
.Sectionleft p{
border:1px solid #DDDDDD;
height:140px;
padding: 5px;
}
.Sectionleft span{
color:#42A5C5;
}
.lastPanel{
text-align:center;
}
.panelLastLeft p,.panelLastRight p{
font-size:11px;
padding:5px 2px 5px 10px;
}

I hope you get an idea about free snippets of bootstrap invoice template.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Bootstrap invoice Examples

Related posts: