Print css being overridden by bootstrap.min.css

Has anyone had any luck overriding the bootstrap css print styles to allow background colours to print? I’m running into an issue where backgrounds and box-shadows are removed forcefully by styles in the bootstrap.min.css and there’s no way to remove them. If I edit bootstrap.min.css and re-run my Mx project locally, my changes seem to get overwritten – seems like bootstrap.min.css is regenerated every time the project is built in Mendix? I have tried overriding in my project UI package sass but in this case, the bootstrap styles are so strong (with !important as well) there doesn’t seem to be a way to override. I’m looking at this snippet specifically: *, :after, :before { color: #000!important; text-shadow: none!important; background: 0 0!important; -webkit-box-shadow: none!important; box-shadow: none!important } I’m open to suggestions!
1 answers

Hi Rick,

I was able to overwrite the bootstrap @media print behaviour by adding the following to my custom.scss file:

@media print {
    *, :after, :before {
        color: #FFF!important;
        text-shadow: none!important;
        background: blue!important;
        -webkit-box-shadow: none!important;
        box-shadow: none!important

Hope this helps.

You can test this in your Chrome browser by setting the Emulate CSS Media to print:

Cheers, Jeffrey