html - 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?

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