Bootstrap is the most popular front-end framework for developing websites. We see a lot of customers using Bootstrap to format invoices and reports while converting them with DocRaptor. However, there are several common issues you may run into when using Bootstrap 3 with DocRaptor:

In print mode, Bootstrap makes following adjustments:

These changes, while reasonable for physically printing a web page, may surprise you if you’re trying to make a PDF invoice or report.

If you want the document to appear as it does in your browser, set the media mode to screen  with the DocRaptor print_options[media]  parameter. Examples of this API parameter are also available in our code libraries and examples.

By default, Bootstrap’s breakpoint for extra small devices (such as a mobile phone) is 768px. The default PDF (8.5×11” with 10px margins) in DocRaptor registers as less than 768px, causing Bootstrap to make all non-extra-small columns full-width.

To fix this, simply add .col-xs- classes  to tell Bootstrap not to make your columns full-width. Alternatively, if you’re generating your own Bootstrap file, you can override Bootstrap’s extra small breakpoints to be much smaller (300px, for example).

This is because Bootstrap’s width for many columns is defined as XX.66666667%. Our PDF engine adds all these up, and because of the 7 at the end, it is technically greater than 100%. Since the row width is over 100%, it bumps the last column to a new row.

We’ve created an example file that overrides all these numbers to end in .6666666%, which comes up less than 100% and properly displays all the columns on one row as you’d expect. Just include, or copy and paste, that file in your CSS.

Once you’ve worked around these simple issues, you’re free to use the power of the Bootstrap framework and the easy PDF generation of DocRaptor!