Bootstrap invoice html template Examples

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

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

Brand Logo



www.pakainfo.com

[email protected]

(000)666 XXX 89




Invoice 0007
01 April,2022

Payment due by 25 May 2022






FROM



LOGO



Virat Kohali

Rogit Sharma

Sachin Tendulkar

Yuvraj Shinh








TO



LOGO



Depali Joshi

Meera Sidhupara

Bhavika Pethani

Dipti Shah









ITEMS



Quantity
Description
Unit Price
TOTAL




2
New Apple iPhone 11 (64GB) - Black
$100
3


2
Apple iPhone 11 (White, 64 GB)
$100
3


3
Apple iPhone SE (Black, 64 GB) (Includes EarPods, Power Adapter)
$100
3


2
Apple iPhone XR (Black, 128 GB) (Includes EarPods, Power Adapter)
$100
3


2
OnePlus 8T 5G (Lunar Silver, 8GB RAM, 128GB Storage)
$100
3


1
COMORO 11D Tempered Glass Screen Protector for Samsung Oneplus 8T
$100
3








Special Notes

Tamilrockers is an Indian piracy website that provides access to download free movies online.




AMOUNT DUE




SUBTOTAL

TAX

SHIPPING

TOTAL




$80

$80

$80

$240

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.