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.

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

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

Answer 3

If you are just trying to create a PDF of hosted web page you can do so for free using Internet Explorer.

I've had to do this for some clients that require viewing their web page and emails layouts in a PDF format for approvals.

1. Open the web page in Internet Explorer.
2. Hit F12 on your keyboard and it will open the inspection tools.
3. Choose the icon for 'Emulation' it's a little computer/phone icon. This allows you to select which version of IE you want to emulate your page in. I choose IE8 to get responsive pages and emails to render like they would on a full desktop view.
4. Then in the top right hand corner of your browser should be an icon (earth with a little PDF doc next to it), click that dropdown menu and select 'Convert Webpage to PDF'

This should automatically create a PDF of your web page as accurately as possible even with responsive CSS.