Print a page with a load of 3

Question

I looked through a lot of answers here on stackoverflow that cover what interests me, but didn't find anything that would work for me.

I understand that the print page is about 550 px for A4, and so bootstrap will use the styles and layouts commonly used for mobile devices.

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

I know that I can change css specifically for printing. But how to solve this problem using the bootstrap 3 system grid? The width of my divs is based on what I added for col-xs, but I want the print to use the layout (width) for col-md

Edit: After I struggled with this for a few more hours, I understand that this can be more complicated than I expected before. Just changing the width does not solve this for me. Many of my divs have syntax

<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 when printed in XS, many elements look gigantic. Therefore, the question remains. Is there a way to make the print page the same as the layout for medium or large devices? Or do I need to do a css print without using the bootstrap grid system and add static widths in pt for all elements to accomplish this?

Thank you in advance

Answer 1

As a result, I decided to solve the problem using my own print.css file, without including all the bootable boot material. They included only some necessary boot things with showing and hiding.

Answer 2

It would be helpful to provide JSBin. In any case, since I had this layout in JSBin with col-sm- (asterisk), you can just change everything -sm-to -xs- between the print request. All percentages are the same at every breakpoint, so changing sm to xs will print this and ignore other col- (asterisk) classes. Ahh, I read the message now, you will need to change the whole col-sm to col-md in this, and then use it! It is important to do this. Xs col are out of media queries, so why is this 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%; } } 

Answer 3

Actually, all you need to add (to user.css) is:

 @media print { @page { size: A4; margin: 0mm; } html, body { width: 1024px; } body { margin: 0 auto; } } 

While you're on it, consider using all of these settings to bootstrap 3

 @media print { @page { size: A4; margin: 0mm; } html, body { width: 1024px; } body { margin: 0 auto; line-height: 1em; word-spacing:1px; letter-spacing:0.2px; font: 14px "Times New Roman", Times, serif; background:white; color:black; width: 100%; float: none; } /* avoid page-breaks inside a listingContainer*/ .listingContainer{ page-break-inside: avoid; } h1 { font: 28px "Times New Roman", Times, serif; } h2 { font: 24px "Times New Roman", Times, serif; } h3 { font: 20px "Times New Roman", Times, serif; } /* Improve colour contrast of links */ a:link, a:visited { color: #781351 } /* URL */ a:link, a:visited { background: transparent; color:#333; text-decoration:none; } a[href]:after { content: "" !important; } a[href^="http://"] { color:#000; } #header { height:75px; font-size: 24pt; color:black } } 

Answer 4

For those who use bootstrap mixes to create such columns (sass version):

 @include make-sm-column(3, 0); 

this will not be enough to rewrite the styles for the column classes, as Christina suggests. The only simple solution I found was to change $ screen-sm in _variables.scss to 595px and recompile bootstrap.css

So, find this code in _variables.scss:

 $screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; 

and change it to this:

 // decrease min-width to fix print layout issue $screen-sm: 595px !default; $screen-sm-min: $screen-sm !default; 

then in your _print.scss

 @page { size: A4; margin: 0; } @media print { html, body { width: 768px; } body { margin: 0 auto; } // .. your custom styles for print layout } 

Answer 5

I had a similar problem. I ended up replacing all col-md- * with col-xs- * and it worked like a charm. Here is the exmaple code

 <div class="container make-border" id="obaidrehman07"> <div class="row make-border"> <div class="col-md-9 text-center main-title col-md-offset-1"> <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4> </div> <div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div> </div> </div> 

converted to

 <div class="container make-border" id="obaidrehman07"> <div class="row make-border"> <div class="col-xs-9 text-center main-title col-xs-offset-1"> <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4> </div> <div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div> </div> </div>