Mathias Mathias - 1 year ago 69
HTML Question

colors not showing at print

how can i do so that when printing my html page it keeps the colors (print to pdf)

<table class="table table-responsive table-striped">
<th>Session navn</th>
<th>Rigtigt svar</th>
<tr class="success">
<td colspan="5">
<button class="btn btn-block btn-default" onclick="deactivate">Deaktiver</button>
<td style="text-align:right">#3</td>

the idea is that i get the data from my database, and gets displayed in the table above. if the row is correct then it turns green by adding the success class to the row. and danger if its wrong (red and green).

this is beeing displayed great when just browsing the webpage. how ever when i try to print it. then the background colorering is off. how can i fix this?

Answer Source

You can't print the table colors because bootstrap has a css @media print rule that prevents this. At one time, I had known a great fix I found elsewhere on the internet but when I upgraded my bootstrap version, I removed it by accident. (Hence, why I found my way here.) If you look inside your bootstrap.css file (Bootstrap Version 3.3.4, not the minimized file bootstrap.min.css) between lines 196-269 you will find the rule that does this.

196  @media print {
197  *,
198  *:before,
199  *:after {
200  background: transparent !important;
264  }
265  .table-bordered th,
266  .table-bordered td {
267  border: 1px solid #ddd !important;
268  }
269  }

One option would be to remove the rule entirely or remove the pragmatic lines. Problem with option one is this media rule also does things like removes the navbar and text shadows, so probably best to go with option two. I inserted my modified version of the rule below, it might still need some fine tuning and will vary if you're using a different version of bootstrap.

@media print {
    *, *:before, *:after {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    a, a:visited {
        text-decoration: underline;
    a[href]:after {
        content: " (" attr(href) ")";
    abbr[title]:after {
        content: " (" attr(title) ")";
    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "";
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    thead {
        display: table-header-group;
    tr, img {
        page-break-inside: avoid;
    img {
        max-width: 100% !important;
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    h2, h3 {
        page-break-after: avoid;
    select {
        background: #fff !important;
    .navbar {
        display: none;
    .btn> .caret, .dropup> .btn> .caret {
        border-top-color: #000 !important;

I removed lines 200, 201, and 255-268. If you prefer to use the minimized version of bootstrap, you will need to either find the same lines there or minimize your non-minimized one. There are websites online that can do this for you, as well as many IDEs will usually have a built-in minimizer.