Bootstrap print CSS removes background color

Question

When I use bootstrap, it removes the background color from everthing when I try to print my page. Almost everything on my website is using bootstrap classes so I want to avo

Answer 1

You can get this working by removing those lines from bootstrap.css file, there might be a jquery solution to this but it is much more complicated than erasing a few lines. :/

Or you could use a plugin called html2canvas as presented in this jsfiddle

Answer 2

I ended up here with the same problem but found the Chrome comes with a show background graphics option on the print dialog under more settings that did exactly that! No modification of Bootstrap (4) required.

Answer 3

just make the specificity-value more specific and you should be ok. something like:

@media print {
   tbody>tr:nth-child(even)>td {
        background-color: rgb(230, 216, 216) !important;
    }
}

Answer 4

Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css

.table td,
.table th {
    background-color: #fff !important;
}

Let's assume you are trying to style the following HTML:

<table class="table">
    <tr class="highlighted">
      <th>Name</th>
      <th>School</th>
      <th>Height</th>
      <th>Weight</th>
    </tr>
</table>

To override this CSS, place the following (more specific) rule in your stylesheet:

@media print {
    table tr.highlighted > th {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

This works because the rule is more specific than the bootstrap default.

Answer 5

Unfortunately there is not a good answer to your question - but maybe if you understand the why's then you can choose a way forward.

Why?

It's true that Bootstrap uses the @media print { * { color: $fff; background: transparent; }} -- but there is a very solid reason. This bit of code is actually derived from the normalizer.css project (by a then college of @mdo 's, @necolas) - it's intent is to make all browsers behave the same. These guys chose to "normalise" the css for a very good reason:

With most browsers one can choose to include or exclude background color, so the behaviour is not standard across even the same browser. Imagine for a sec a website with very dark background with white text - when printing with backgrounds off, it will look like you're printing nothing - when actually you're printing white text on no (white) background.

There was no way to account for all the different uses of color, so they choose to go black (font) and white (background, actually 'transparent'). Even the choice of black was well thought of -- its a better print solution, as most color printers have more black "ink/toner" (more economical) and they don't need to mix color to make black (so faster).

Remember that Bootstrap is also a "framework" - so a starting point if you will - and kudos to @mdo and @necolas for having the foresight to think of this in terms of establishing a predictable baseline. (No, I don't know them.)

Nope...

So the thinking here is: "what if we could 'go back' and unset this. Unfortunately CSS does not work like that - yes browsers load the CSS declarations in a "queue" where the last declaration wins (LIFO, or last-in-first-out), but I'm not aware of a way to remove this stack. So CSS developers just add more to the end...

So one would assume that we can go back that way --- add a * { background-color: inherit }. Problem is that inherit reverts to the parent property, but * is the root, so it has nothing to revert to. Same goes for initial!

Maybe!

So we're left with 4 options, none of them is what you where hoping for, but it is what it is. In order of difficulty:

1. Download the BS (less or sass) source, edit the offending code, and then compile it. (You need to use a local copy, CDN's will not work.)
2. Download the CSS variant of your choice, search and delete the offending code. (No CDN's again.)
3. Use getbootstrap.com/customize to create a new variant - exclude "Print media styles" under "Common CSS". (Again, no CDN's)
4. Override the specific items who's color you want to print: e.g.

    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

CDN's copies of BS will now work, but then you have the problem of the user possibly not printing backgrounds and having the output white (yellow in the e.g.) on white!

Finally

Well I hope learning the why's was at the very least a way of you thinking of a workaround. General rule of thumb I follow is that when printing, the background is (should be) always white. When constrained that way you start thinking of novel ideas, like exclamation icons around the text that only "print" (@media only screen { .hidden-screen { display: none; }})

Answer 6

@Vino explained really well. I was also facing problem because bootstrap.css makes background transparent forcefully. Thus I have customized the specific element in my custom CSS file. Remember to change <.element> with element where you want the colorful background instead of transparent.

@media print {
	 .element{
		background-color: white !important;
		box-shadow:  inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
	 }
 }