Converting Twitter bootstrap page into PDF with wkhtmltopdf : span issue

Here is solution for Bootstrap3: Use .col-xs-n always.

The reason is wkhtmltopdf didnt support css in @media block. In bootstrap3, only col-xs-n rule outside @media block.

I've checked the bootstrap2.3.2 css, seems spanN rules always be inside @media block.

So an ugly solution would be copied out all spanN rules into top level to another css file and included it into html.


I know that this question is old but this problem still occurs. In a recent Laravel 5.8 and Twitter Bootstrap 4.0.0 project. I managed to use .col-md .col and getting perfect results by doing the following:

In adding --viewport-size 1024x768 argument on config/snappy.php

     'pdf' => array(
        'enabled' => true,
        'binary' => "C:\wkhtmltopdf\bin\wkhtmltopdf --viewport-size 1024x768",
        'timeout' => false,
        'options' => array(),
        'env' => array(),
    )

Then on your view use .col-md or .col without any problems.

Note, include Bootstrap 4 to your HTML using public path.

//Laravel
<link rel="stylesheet" href="{{public_path('css/bootstrap4/bootstrap.min.css')}}">