Menu
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>
584
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.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
