I have used col-xs-6 class t create two equal columns. In our first columns you can add your logo or your name. Just add a logo image in your invoice folder and name it logo.png. If you don’t have a logo then you can remove the image tag and replace Logo Here text with your name.

Now open invoice.html file in Google Chrome browser, right click anywhere on page and click on Print. You will see the following result.

For the second column I have also used text-right class to align the text (Invoice title) to the right side. For the invoice number I have used small class.

If you see a different print preview, make sure that you have commented out print styles properly.

Client details section

Next we will create two columns. I will use panels class to create contextual panels. In the first panel you can add your details (name, address) and in the second panel you can add client details. I will also use col-xs-offset-2 class to create a gap between the two panels. As I described earlier, different classes are available for panels. I will use the primary panel.

In our panel i have used panel-heading class for headings and panel-body class for body section, where you will add address. Now if you preview your page in chrome you will see following result.

Job/project details Section

For this section i will use Tables with table and table-bordered class. We will have five headings for job details. Service, Description, Hrs/Qty, Rate/Price, Sub Total. Now replace the job/project details here text with following code.

Now we need to add a Total payment section. For this section I have created a new row with text-right class. This row has two columns, each with col-xs-2 class. Our first column has an extra col-xs-offset-8 class. Using col-xs-2 class we can move columns to the right. Each class increases the left margin of a column by a whole column.

Last section: Payment Details

Now we will create the last section of our document. In this section we will create a two column layout. The first column will have col-xs-5 class and second column will have col-xs-7 class. Each column will have divs with panel-info class. The first panel will be used for payment details (banking details, paypal email or any other detail). In the second panel we will add contact information (email, twitter, mobile number) and any other detail.

In the above code you can see we have a parent div with panel panel-info classes, then we have two child divs. The first child div has a panel-heading class and the second child div has a panel-body classes.

I have used the @import method to use the Bree Serif font from Google fonts. I have used Bree Serif for body and all headings. If you use Bree Serif font for only the body selector, then your heading will use Bootstrap’s default styles for all heading. I have over-ridden Bootstrap’s font-family for all headings.

Save Invoice as PDF

Our invoice is complete. Now open invoice.html in Google Chrome, right click anywhere on web page, click Print and Choose Save from the right side panel. That’s all. You can download the source code for this project through this Github repository.

Tahir Taous is founder of Just Learn WordPress, a training site where you can learn how to create and manage websites with WordPress, WordPress essential training, theme development courses free video tutorials and articles.