Print colored bootstrap label

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>

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

Print colored bootstrap label, 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  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

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

Colors · Bootstrap, Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too. Bootstrap - Labels - This chapter covers Bootstrap labels. Labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels as shown in the

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

CSS · Bootstrap, To ensure proper rendering and touch zooming, add the viewport meta tag to your the global link color via @link-color and apply link underlines only on :​hover. Bootstrap 4 Grid BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples Bootstrap 4 Theme BS4 Basic Template Bootstrap 4 Ref All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip

Theming Bootstrap · Bootstrap, We use Sass maps for our colors, grid breakpoints, and more. Just like Sass $​enable-print-styles, true (default) or false, Enables styles for optimizing printing. I thought its a bootstrap feature :) – Sato Jun 6 '16 at 3:26 Possible duplicate of What is the HTML for="" attribute in <label>? – Jonas Praem Dec 17 '18 at 20:07

Bootstrap Badges and Labels, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they're built for Bootstrap, they'll work in any project.

How To Create Labels, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  I'm trying to print a document, that is formed with bootstrap. Requirement is that print should look well/nice. (Because this document is archivised) The problem is, I've done a table, that is mad

Comments
  • Works fine for me using Firefox 37 on Linux. Had to enable "print background colors" and "print background images"
  • @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...