Wicked PDF ignores bootstrap grid system

Question

in my template x.pdf.erb site i have linked all the stylesheets and javascript tags:

           <%= wicked_pdf_stylesheet_link_tag "bootstrap.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "style.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "styleUmowa.css" -%>
            <%= wicked_pdf_stylesheet_link_tag "animate.css" -%>
            <%= wicked_pdf_javascript_include_tag "application" %>

When the pdf site is generated, everything is good except bootstrap grid system, i mean wicked pdf ignores my:

<div class="container">
   <div class="row">
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
       <div class="col-lg-4"></div>
   </div>
</div>

So, it`s displayed like normal divs without bootstrap grid. Can you help me with this?

Solution 1

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'
  end
end

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.

Solution 2

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?

Solution 3

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

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

Comments

[Stan]

Thanks for great and complete solution(s) :)

[dev404]

For some reason I cannot use the .row class with that pdf.css.scss you suggested. I know that the .row class isn't included (and honestly it isn't much of an issue to create one within it). I tried to simply include ALL of bootstrap 3 with @import "bootstrap" but this only allows me to use 10 columns.

[sixty4bit]

Awesome answer!! Thanks so much. This should be marked correct. I went the "col-xs-*" route for simplicity's sake.

[Haris Krajina]

Great elegant solution with number 3. love it!

[tommyalvarez]

What about bootstrap 4?

[Jigar Bhatt]

This is called Perfect Answer, Thank you for the help!!

[alexventuraio]

I'm using Rails 5.2 and Bootstrap 4 but I haven't been successful to make wicked_pdf gem work with styles from boostrap gem. Does anybody have any example to make it work?

[quantka]

I'm getting an "undefined mixin 'make-grid'" error with option #3, any ideas?

[luke]

@AlexVentura I ended up downloading the bootstrap css to it's own css file and putting it in an AWS S3 bucket. Then linking to that CSS file in my pdf template file. Worked for me. But I had to set the viewport like above in the answer