Geek Answers Handbook

Using wkhtmltopdf with Bootstrap 3 removes color styles

I am trying to create pdf reports from Meteor using the SSR package and wkhtmltopdf. Everything is going well, except for one thing: when I tie bootstrap 3, I lose all colors. Column format, table format, etc. Everything is fine, but everything is black on white. Even if I use the built-in css, all I get is black and white.

If I remove the boostrap link, all the colors will go through as expected.

Here is the template that I am executing:

<Template name="spaceUtilSpacePDF"> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <div class="well"> <table class="table"> <tbody> <tr> <td class="bg-danger"> Stuff</td> <td style="background-color:blue"> Stuff</td> <td style="color:red"> Stuff</td> </tr> </tbody> </table> </div> </div> </div> </div> <div style="page-break-after:always"></div> <button class="btn btn-danger">Test Button</button> </body> </html> </Template>
+8
css colors twitter-bootstrap-3 wkhtmltopdf
source share
1 answer

This is probably due to the following snippet from the HTML5 Boilerplate included in Bootstrap v3:

 /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ // ========================================================================== // Print styles. @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; // Black prints faster: h5bp.com/s //... }

You can either remove this from your copy of Bootstrap, or try to override it.

Note that Bootstrap v4 removed this snippet.

+23
source share

More articles:


All Articles