Converting Twitter bootstrap page into PDF with wkhtmltopdf : span issue

Question

I am using Symfony2 Bundle KnpSnappyBundle to convert an html twig template to a pdf.

KnpSnappyBundle is base on Snappy wrapper, that use wkhtmltopdf.

My template use twitter bootstrap 2.3.2 css like this :

<div class="container">
    <div class="row">
        <div class="span12">
            <h4>TITLE</h4>
        </div>
    </div>
    <div class="row">
        <div class="span6" id="customers">
            <h5>TITLE</h5>

            <p>TEXT</p>

            <ul class="unstyled">
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
            </ul>
        </div>
        <div class="span6" id="estimate">
            <h5>TITLE</h5>

            <ul class="unstyled">
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
                <li>LIST ITEM</li>
            </ul>
        </div>
    </div>
</div>

Problem : the customers and estimate spans are not on the same line as they should be. I don't know what is going on.

Solution 1

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.

Solution 2

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')}}">

Comments

[qdelettre]

I'm trying to generate pdf on the server side. And if i tried to do what you are saying, i wouldn't use internet explorer ;)

[SBB]

I found this question as I am facing an issue where my bootstrap page is in 3 columns (3-6-3) and when I run it through wkhtml2pdf, its rendering it all as 12 cols. Can you elaborate on this copying out the rules scenario ? I'm using 2.3.2

[fabpico]

Did not work for me so i searched further. flex css property was ignored. So i wrote an additional .col-md-3 class with added float and width, than it worked. Found issue here

[Joris]

Add viewport-size: '1024x768' to the wkhtml2pdf options and you can use the col-md-* classes.

[Thomas Fournet]

It works with bootstrap 4, you simply need to use .col-n instead of .col-xs-n

[marcovtwout]

Since Bootstrap 4.1 this no longer works, see explanation here: github.com/twbs/bootstrap/issues/27642#issuecomment-45047974‌​1

[Shashank Shah]

@Joris thanks! it works when you add this option while generating the PDF file and not into the config file. $pdf->setOption('viewport-size', '1024x768');