Node-html-pdf: Bootstrap with Grid System is not working with node-html-pdf.

Created on 7 May 2017 · 8Comments · Source: marcbachmann/node-html-pdf

The bootstrap is working fine but the grid system isn't. I have checked the HTML file on the browser, it shows fine, but the generated pdf is not showing the divs in columns.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://bootswatch.com/sandstone/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        </div>
    </div>
</body>
</html>

Source

sanjuleadcap

👍4

Most helpful comment

.col-xs-n didn't work out for me.
The hint "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" from @Sunil6591 helped me out.
Downgrading bootstrap to 3.3.7 display my rows and columns at least correctly in the pdf-file.

Best regards and an awesome time for you guys
Denis

rekDen on 30 Jul 2018

👍4 👎1

All 8 comments

Having similar behavior. Any word on a fix/workaround?

JakenHerman on 22 May 2017

@sanjumathew use .col-xs-n instead of .col-md or others. This fixed it for me.

JakenHerman on 23 May 2017

👎13 👍4

Upgrading the boostrap fixes the issue - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Sunil6591 on 14 Aug 2017

Similar issue... using Bootstrap 4 if I have 2 columns each using col-xs-6 then the columns stack, but when I switch to using col-6 the columns are side by side.

This is fine for 2 simple columns, but doesn't really give me the ability to showcase the responsiveness at various breakpoints.

Looks like the PDF generates the XS version of the page :-\ ... can't figure out how to tell PhantomJS I want the HTML rendered at 1200px (or whatever). (To be fair, I've never used PhantonJS & I've only been looking at this for about an hour. Looking into seeing if I can set it using arguments).

Setting the options like this (see below) doesn't give me the proper CSS breakpoints.

var options = {
  width: '900px', // 100% didn't work either
  height : '2000px',
  zoomFactor : .5 // tested with and without
};

jiggy1com on 7 Sep 2017

You can fixit replacing every col-md-6 to col-xs-6. That's it!

Thanks to Alex Johnson -> https://stackoverflow.com/questions/34182550/phantomjs-external-css-is-ignored-in-rendered-pdf

pekpon on 16 Dec 2017

👎3 👍1

Best regards and an awesome time for you guys
Denis

rekDen on 30 Jul 2018

👍4 👎1

.col-xs-n didn't work out for me.

Bootstrap 4 uses .col-n instead of .col-xs-n

farmbotgianpaolo on 16 Nov 2018

To solve the problem, downgrade Bootstrap-4 to Bootstrap-3 and use .col-xs-n ( n = 4,6,12,etc ) . So, doing this will provide proper functionality while using grid system.
But another problem that might be there is "no-color problem", i.e. even after specifying the colors and various styles, the pdf wont respond to those styles.
In order to tackle the above mentioned problem, save bootstrap.css or bootstrap.min.css locally and remove all the @ media print classes. These classes have rules that prevent you to display styles. Now use the edited bootstrap.