Blogs

How to Create an Invoice with Twitter Bootstrap, Part 1

Tahir Taous
Share

A few days ago I had to create an invoice. I searched Google for online services to create an invoice quickly. I found a website, created a simple invoice, and when I clicked on the Save as PDF button, it prompted me to sign up. I was not ready to register to download my very simple invoice as a PDF.

I am a Bootstrap user and love this wonderful framework, so I just decided to see if I could create my invoice with Bootstrap.

It took some time to create an invoice with Bootstrap, but it was a learning experience for me. In this article I will share my experience with you.

Twitter Bootstrap is a very popular framework to create websites, it offers great features. You can create a website very quickly with Bootstrap, but in this article I will create something different with Bootstrap. I will show you how to create an invoice with Twitter Bootstrap and save it as a PDF.

What we need

We need a text editor for editing our HTML files. You can use any text editor of your choice, I will use SublimeText. We also need the Twitter Bootstrap framework and a Google Chrome browser, as this lets us save web pages as PDF files.

Download Links

Getting started

Create a new folder on your desktop and name it Invoice. Now open Bootstrap’s zipped archive, under dist folder, you will have CSS, JS and fonts folder, for our project we need Bootstrap’s CSS files. Just copy the CSS folder from the dist folder to your new invoice folder.

In the CSS folder, you will see four CSS files. We need bootstrap.css, you can delete the other files if you like.

Open your text editor, create a new file and save it as invoice.html in our invoice folder, then add the following code in the invoice.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>INVOICE Template</title>
    <link href="css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            content here
        </div> <!-- /row -->
    </div> <!-- /container -->
  </body>
</html>

This is the basic HTML code for our file. For our invoice project we will use extra small grid. We will use Bootstrap’s col-xs-* class for an extra small grid.

Why we need to use a non-responsive grid

We will use Google Chrome to save our final invoice as a PDF. If we use a medium grid, Chrome will stack the columns below each other when we print our page. Look at the following image.

chrome-print-problem

As you can see, the medium grid looks fine on a normal web page, but when we try to print our page, Chrome stacks the medium grid columns below each other. Now you understand why we will use an extra small col-xs-* class.

Alternative method: Use non-responsive CSS from Bootstrap 2

If you are familiar with Bootstrap 2, then you can use it as an alternative, as this offers non responsive CSS. Bootstrap 2 was not mobile first, you had to add an extra style sheet to make your web pages responsive.

If you do want to use Bootstrap 2, then you can use span* class to create the columns (replace * with a number from 1 to 12 for the column width). The following example will create a layout with three equal columns.

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

Warning: If you want to use Bootstrap 2, then you will have to use two style sheets, first one from Bootstrap 2 for the non responsive grid and a second one from Bootstrap 3 for Panels, because Panels are new in Bootstrap 3.

What we are going to use

Bootstrap 3, Small Grid and Panels For this article I am going to use Bootstrap 3, because I will use the .panel class to create panels, which are available in Bootstrap 3. There are different panels available, you can use whatever you like. I will use panel-primary and panel-info classes to create panels.

.panel-default .panel-success .panel-danger .panel-warning .panel-info classes are available for contextual panels.

panels

There are some more classes available to style panel content. .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse

Something important about Bootstrap’s print styles

Keep in mind Bootstrap removes some styles for print. For example Bootstrap makes background transparent, removes text-shadow, box-shadow for print. For links, the URLs of links will be displayed after the link text. That means your background color and link color won’t be visible on PDF, when you print your web pages in Chrome.

printpreview1

How to Reset Bootstrap’s print styles

You can find Bootstrap’s print style on line 33 in bootstrap-min.css, and in bootstrap.css print styles starts from line 217 and ends at line 290.

In bootstrap.css Print styles starts from 

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

and ends at line 290

  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

To remove/reset print styles just select print styles and press Ctrl+/ in SublimeText. This will comment out all print styles.

printpreview2

Now we have set up all necessary features. In Part 2 of this article, we will create our invoice and save it as a PDF.