csstwitter-bootstrapprintingprint-css

Why are my styles getting removed when I try to print a webpage in Chrome or Firefox?

I am not able to figure out why my button styles/colors are getting removed when I try to print my webpage. I am using bootstrap for some of my styles. My Webpage Print Screen

.button.primary {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 18px;
    line-height: 1.8rem;
    background-color: #EEB111;
    color: #FFF;
    font-weight: 600;
    text-decoration: none;
    outline: 0;
}
Solution

  • It has to do with bootstrap. If your bootstrap includes print media styles, because it might be not customized in a way it excludes them, some styles will get changed.

    boostrap with and without print media styles (Hintergrundgrafiken = background graphics)

    Also this is important, as you already did correctly in your screenshot:
    To print the page with colors and stuff, e.g. in Firefox you have to tell the browser by clicking on File > Page Setup... > Print background or Print (icon in the top right menu) > Page Setup... > Print background.