0

I want to print a colored bootstrap label. When I try to print the HTML page the label have no color, even when I enable the "print background image" option in Chrome. Can someone help me?

Label:

<span class="label label-success">Text</span>
VitaminD3
  • 3
  • 4
  • Works fine for me using Firefox 37 on Linux. Had to enable "print background colors" and "print background images" – user530873 Apr 26 '15 at 17:32
  • @smpl - since it involved enabling a setting to get this to work, I think you have the answer. You may want to elaborate a bit and then post it, otherwise the question ends up in an orphaned state where it comes up for review etc. because it doesn't have an answer... – DrCord Apr 26 '15 at 17:49

3 Answers3

0

CSS class label-success uses background color CSS property. This property is usually removed by the browser before printing.

Printing background color can be enabled in browser settings, otherwise it cannot be turned on by any CSS rule.

Usually this is workarounded using background images. E.g. see https://defuse.ca/force-print-background.htm

stack item
  • 544
  • 4
  • 11
0

See this answer #33410724 for an explanation - the answer pertains to general background color - but .label suffers the same problem.

Community
  • 1
  • 1
0

Try this (add normally in styles html tag):

@media print {
        .label-warning {
            color: #ffffff !important;
            background-color: #f39c12 !important;
            border-color: #f39c12;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }
    }

You can do the above with all others label classes

jarh1992
  • 603
  • 7
  • 8