Printing page with bootstrap 3

Question

I've been looking through a lot of answers here on stackoverflow that semi-cover what I'm wondering about, but haven't found anything that worked for me.

I understand that the printing page is about 550 px for A4 and therefor bootstrap will use the styles and layout usually used for mobile devices.

When I use Ctrl+P for my web page, the printable page looks just like the mobile version of my page. But how do I make it look like the desktop version? (media > 1024 px) Is there a way to do this?

I know I can change the css specifically for print. But how to solve this thing with the bootstrap 3 grid system? The width on my divs gets based on what I have added for col-xs, but I want print to use the layout (width) for col-md

Edit: After I have been struggeling with this for some more hours I realize that it might be more complex than I first expected. Just changing the width doesn't solve it for me. Many of my divs has the syntax of

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

or

<div class="col-md-4 col-sm-6 col-xs-12"></div>

The page looks good in XS for small devices, but printing in XS makes many elements look gigantic. So the question remains. Is there a way to make the printing page look the same as the layout for medium or large devices? Or do I have to make the printing css without using bootstrap grid system and add static widths in pt for all elements to accomplish this?

Thanks in advance

question from:https://stackoverflow.com/questions/20243767/printing-page-with-bootstrap-3

Answer 1

It would be helpful to provide a JSBin. Anyway, since I had this layout in JSBin with col-sm-(asterisk), you can just change all the -sm- to -xs- in between the print media query. All percentages are the same at every breakpoint, so changing sm to xs will print that and ignore the other col-(asterisk) classes. Ahh, I read the post now, you'll need to change all the col-sm to col-md in this and then use !important, that should do it. The xs col are outside media queries, so that's why this is happening.

http://jsbin.com/AzICaQes/5

@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%;
 }

  }