How to make bootstrap3 classes compatible with printing

Question

I have sets of "col-md-6" divs on a page. They take up half the width of the page each until the screen is resized to below a certain size at which point they stack vertically.

When I print the screen they always stack vertically even though the page would be perfectly readable with the divs side by side.

By experiment using col-sm-6 and col-xs-6 I discovered that the only way to get the divs to print side by side is using col-xs-6 but this means that the divs will not stack on a very small (phone) display. So it appears that bootstrap thinks that the printer has the same width/resolution as a mobile phone.

Am I doing something wrong? Why does bootstrap think that a printer has such a low resolution? Can I do anything to change this?

score 2 · Answer 1 · edited May 23 '17 at 12:13

I used the answer given by christina for a similar question here,

Printing page with bootstrap 3

that is by adding to the css media print to see col-sm like it is col-xs

@media print {

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: left;
}
.col-sm-12 {
  width: 100%;
}
.col-sm-11 {
  width: 91.66666666666666%;
}
.col-sm-10 {
  width: 83.33333333333334%;
}
.col-sm-9 {
  width: 75%;
}
.col-sm-8 {
  width: 66.66666666666666%;
}
.col-sm-7 {
  width: 58.333333333333336%;
}
.col-sm-6 {
  width: 50%;
}
.col-sm-5 {
  width: 41.66666666666667%;
}
.col-sm-4 {
  width: 33.33333333333333%;
 }
 .col-sm-3 {
   width: 25%;
 }
 .col-sm-2 {
   width: 16.666666666666664%;
 }
 .col-sm-1 {
  width: 8.333333333333332%;
 }

  }

score 0 · Answer 2 · answered May 07 '15 at 05:54

As an alternative to CSS, you can do this if you're working in Less.

@media print { .make-grid(md); }

remplace 'md' by whatever screen resolution you want to use. I find that md is what looks best onscreen and on paper in my case.

This will call bootstrap's .make-grid mixin when compiling the Less code.

score 0 · Answer 3 · answered Nov 20 '18 at 19:08

To solve this I created a print.css and included:

@page {
    size: A4;
  /* margin: 40px; */ 
    margin: 0mm;
}
html, body {
    width: 1024px;
}

Then in my _Layout page included:

<link rel="stylesheet" type="text/css" media="print" href="../../Content/Print.css" />

How to make bootstrap3 classes compatible with printing

3 Answers3