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.