Printing changes Bootstrap based layout to single column mode

Question

When a page based on Boostrap's grid layout is printed, it collapses to single column mode. Does anybody know why is that and how to get around this issue?

The problem is best seen by pressing Ctrl+P at http://getbootstrap.com/css/#grid.

Answer 1

If you're printing with Chrome, then per this bootstrap issue it seems that Chrome is setting the width of the print media to smaller than 768 pixels which moves the columns into xs/"extra-small" region. Thus, your col-sm-* and larger column classes will be stacked.

However, the col-xs-* columns seem inconsistent when rendering to media screen vs print. Personally, I wanted to columnize something in print CSS media mode and not in screen CSS media mode, so I hooked into Chrome's pre-print callback to inject col-xs-6 for a class called print-col-xs-6 like this using jquery:

var beforePrint = function() {
    console.log('Functionality to run before printing.');
    $('.print-col-xs-6').addClass('col-xs-6')
};
var afterPrint = function() {
    console.log('Functionality to run after printing');
    set_timeout(function() {
      $('.print-col-xs-6').removeClass('col-xs-6')
    },500)
};

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

I'm not sure the timeout is necessary and since my app is for some in house folks, they are forced to use chrome :-D

Answer 2

That is the printable version of the site as defined by the css. Most styles are removed to make it easier to print. Only way around it would be to override the supplied styles.