Twitter Bootstrap prints in XS

Question

I use Twitter Bootstrap 3, but when I go to print my web page (via File> Print), it prints the page in XS (Mobile view), how to make it use and print in MD (Desktop view).

It works only in IE version 9 and below. Every other browser and IE 10+ have a problem.

Answer 1

To fix this, I added to my CSS

following:

@media print { body { margin: 0; padding: 0 !important; min-width: 768px; } .container { width: auto; min-width: 750px; } } 

This seems to have worked great for me.

Answer 2

.col-xs-X is outside of media queries, so it prints. All columns have the same size: 100/12 = 8.333333%, so .col-lg-6 and .col-sm-6 and .col-xs-6 and .col-md-6 all 50% .container/.container-fluid .

To print your printed pages, you must add a print request:

 @media print { .container { max-width: none!important; width: 100%!important; padding-left: 0; padding-right: 0; } .row { margin-left: -1%; margin-left: -1%; } [class*="col-"] { float: left; padding-left: 1%; padding-right: 1%; } .col-sm-12, .col-md-12, .col-lg-12 { width: 100% } .col-sm-11, .col-md-11, .col-lg-11 { width: 91.66666667% } .col-sm-10, .col-md-10, .col-lg-10 { width: 83.33333333% } .col-sm-9, .col-md-9, .col-lg-9 { width: 75% } .col-sm-8, .col-md-8, .col-lg-8 { width: 66.66666667% } .col-sm-7, .col-md-7, .col-lg-7 { width: 58.33333333% } .col-sm-6, .col-md-6, .col-lg-6 { width: 50% } .col-sm-5, .col-md-5, .col-lg-5 { width: 41.66666667% } .col-sm-4, .col-md-4, .col-lg-4 { width: 33.33333333% } .col-sm-3, .col-md-3, .col-lg-3 { width: 25% } .col-sm-2, .col-md-2, .col-lg-2 { width: 16.66666667% } .col-sm-1, .col-md-1, .col-lg-1 { width: 8.33333333% } } 

Answer 3

Please read http://getbootstrap.com/getting-started/#support-printing

Its essence is that browsers do not correctly handle media requests when printing. They do not use the same CSS viewport width as the physical paper width.

Workaround options:

• Trim the extra small grid and make sure your page looks acceptable.
• Adjust @screen-* Less variables to make your printer paper more than small.
• Adding custom media queries to change grid breakpoints for print media only.

Answer 4

Printing is difficult in most browsers - the problem is that depending on the browser, default paper size and orientation (portrait or landscape) and the current wave in Sydney, the page will print in 72ppi, 96ppi or 144ppi.

In Bootstrap, a media query sets the pixel bandwidth ... for example. "xs" is between 544px-767px, so depending on the width of the page (print), your site may return to the width options "xs" or "sm" when printing. A.

The solutions listed above using @media print {} will do the trick in most cases, but the fact remains that the site should be encoded to fit the print. A.

I have an example in vinorodrigues / print-ready that tries to explain some of these problems and considerations.