Wicked PDF ignores bootstrap grid system

I've came across the same problem. There are several solutions:

1. Upgrade your wkhtmltopdf binary to version >= 0.12, then add :viewport_size option to render, something like this:

respond_to do |format|  format.html  format.pdf do    render pdf: "my_pdf",           viewport_size: '1280x1024'  endend

2. Or you can just use col-xs-* classes
3. Or create pdf.css.scss (I'm using bootstrap-sass) with following content:

@import "bootstrap/variables";@import "bootstrap/mixins";@include make-grid(sm);@include make-grid(md);@include make-grid(lg);

Don't forget to include it with <%= wicked_pdf_stylesheet_link_tag "pdf.css" -%>

For plain css you will have to copy-paste all .col-sm-*, .col-md-*, .col-lg-* rules from bootstrap.css into your pdf.css, BUT without @media wrappers, it's important.

The above solutions don't work with Bootstrap 4 as of now. Bootstrap 4's grid system is built on the use of flexbox, which is not supported by wicked_pdf, due to its dependency on wkhtmltopdf.

In order to get a simple grid working while using Bootstrap 4, it's best to define your own grid by using the width w-* and display d-* commands, in order to overrule the display: flex setting.

Example:

<div class="container">   <div class="row d-table-row">       <div class="col w-25 d-table-cell"></div>       <div class="col w-25 d-table-cell"></div>       <div class="col w-25 d-table-cell"></div>       <div class="col w-25 d-table-cell"></div>   </div></div>

Note: only widths of 25, 50, 75 and 100% are supported by default. You can increase flexibility by adding your own additional width definitions to the $sizes variable of bootstrap, by adding something like this to your scss stylesheet:

// _custom.scss@import "bootstrap/functions";@import "bootstrap/variables";$sizes: map-merge((20: 20%, 33: 33.33%, 40: 40%, 60: 60%, 67: 66.67%, 80: 80%), $sizes);@import "bootstrap";// Your CSS

Using width and display classes:

https://getbootstrap.com/docs/4.0/utilities/display/

https://getbootstrap.com/docs/4.0/utilities/sizing/

Bootstrap 4 flexbox grid and wkhtmltopdf:

How to use flexboxgrid with wicked_pdf?

For anyone who using KnpLabs/snappy, giving the viewport as an option fixes the situation:

$snappy->setOption('viewport-size','1280x1024');