How to fix several common issues that occur with Bootstrap 3

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:

Bootstrap is very opinionated in media print mode

In print mode, Bootstrap makes following adjustments:

• All columns become full-width

• All colors are removed

• All background shading is removed

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.

Bootstrap thinks the PDF is an extra small device

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).

The last Bootstrap column is on a new row

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!