9

I'm trying to create pdf reports from Meteor, using the SSR package and wkhtmltopdf. Things are going well, except for one thing: when I link bootstrap 3, I lose all colors. The column format, table format, etc is all fine, but everything is white on black. Even if I use inline css, all I get is black on white.

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

Here's the template I'm rendering:

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

1 Answer 1

28

This is probably because of the following snippet from the HTML5 Boilerplate that's 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 has removed this snippet.

2
  • @crush Download the less / sass file and configure yourself? Feb 8, 2016 at 14:59
  • Great tip. I was able to get the color to show up simply by adding !important to my color rule. Jul 26, 2018 at 22:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.