Fix Bootstrap 3 Printing in Google Chrome (and other browsers)

So, there’s an issue when printing a website built on top of Bootstrap 3. It seems the Bootstrap team is punting on the problem until Bootstrap 4.

The problem is when printing (in Google Chrome or certain versions Internet Explorer) the mobile layout is rendered.

There are numerous suggestions floating around about how to fix it, but I didn’t like any of them.

So I decided to see what it’d take to get it to work for the particular app I was working on. This is a pretty small app with about 10 distinct pages. However, Bootstrap responsive utility (visible-xs, hidden-xs, hidden-lg, etc) and the responsive grid (col-sm-2, col-sm-10, etc) classes were littered all over the markup.

So I decided the solution would be to change the print styles to use the “small” (or “sm”) layout. This got me most of the way there, and then I had to sprinkle in a few hidden-print styles in our markup.

Note: Some of the styles I’m working with were deprecated in Bootstrap 3.2. However, deprecation doesn’t mean removal, so I’m still using them. We use these responsive utlities for tables, and so we didn’t want to give them up just yet.

@media print {
    .make-grid(sm);

    .visible-xs {
        .responsive-invisibility();
    }

    .hidden-xs {
        .responsive-visibility();
    }

    .hidden-xs.hidden-print {
        .responsive-invisibility();
    }

    .hidden-sm {
        .responsive-invisibility();
    }

    .visible-sm {
        .responsive-visibility();
    }
}

The above code references the Less mixins provided by Bootstrap. If you aren’t using Less, then just use the CSS output. I’ve made it available here:

Print CSS Fix for Bootstrap 3

I just created this and haven’t thoroughly tested it to work for all scenarios, but it “works on my machine.” Let me know if you notice a problem and I’ll update the post.