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.

score 102 · Accepted Answer · answered Jan 16 '14 at 03:38

102

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.

answered Jan 16 '14 at 03:38

raykin

1,757
1
14
19

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 – SBB May 04 '15 at 17:37
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](https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522) – fabpico Aug 24 '17 at 06:11
2

Add viewport-size: '1024x768' to the wkhtml2pdf options and you can use the col-md-* classes. – Joris Mar 02 '18 at 21:04
It works with bootstrap 4, you simply need to use .col-n instead of .col-xs-n – Thomas Fournet Nov 06 '18 at 14:28
1

Since Bootstrap 4.1 this no longer works, see explanation here: https://github.com/twbs/bootstrap/issues/27642#issuecomment-450479741 – marcovtwout Aug 10 '19 at 05:43
@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'); – Shashank Shah Jun 16 '22 at 14:47

score 12 · Answer 2 · answered Jul 24 '19 at 22:07

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

1

Working like champ in 2023 – Alshoja Jan 09 '23 at 09:35

score 2 · Answer 3 · answered Nov 24 '22 at 16:17

From fabpico comment for raykin answer found the most appropriate way to go reading through the whole discussion. I've tried to shrink the css stuff as much as possible without any consequences for my documents. Just added some css for row class without any altering the html document:

<head>
    <style>
        .row {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        .row > div {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
        }
    </style>
</head>

<div class="container">
<div class="row">
    <div class="span12">
        <h4>TITLE</h4>
    </div>
</div>
<div class="row">
    ...
</div>
</div>

Hope it is going to save someone's time :)

Only solution that word for me. I thank you so much! – Jeremy Belolo Jan 19 '23 at 17:51 — Jeremy Belolo, Jan 19 '23 at 17:51
This also worked for me (Bootstrap v5.0.2) thank you!!! :) – george_the_frog Apr 04 '23 at 15:10 — george_the_frog, Apr 04 '23 at 15:10

score -44 · Answer 4 · answered Jan 10 '14 at 18:39

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.

Open the web page in Internet Explorer.
Hit F12 on your keyboard and it will open the inspection tools.
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.
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.

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 ;) — qdelettre, Jan 16 '14 at 07:50

Converting Twitter bootstrap page into PDF with wkhtmltopdf : span issue

4 Answers4

Linked