Printing a bootstrap page from Google Chrome cause (sometimes) truncation height of the printed page

Question

Starting from this official template: http://getbootstrap.com/examples/jumbotron/ of bootsrap v. 3.3.7 and using Google Chrome v. 54.0.2840.99 m (64-bit), on maximized window 1920px monitor, when i try to print the page in A4 horizontal format the print preview (and the saved PDF or printed page) is height truncated.
In this specific case should be 2 pages height instead of 1.
This happened when:

• Printing from Chrome (in Firefox v50.0.1 and IE11 the issue is not present)
• When the cols are not collapsed while i'm printing in screen mode (in the above boostrap example when the width of the window is greater or equal than 992px and press print. If the window is less than 992px and i press print, the print preview is not truncated)
• The single paper height is shorten than the bootstrap page (in the above bootstrap example A4 Vertical do not reproduce the issue because there is not enough content)

I noticed that if i remove the float:left;from all the .col-**-* the print preview does not truncate but clearly the single column template is not always suitable for printing.

You can replicate the bug also on the original bootstrap example.
How can I get the bootstrap grid in print mode and the printed page not truncated by Chrome?

Answer 1

I have also seen this issue. I'm SO glad it's not just me. The fact that the print output changes if you change the screen viewport is particularly odd.

Anyway, I tried @artem's solution, but without success.

I eventually did:

@media print {
    [class*="col-md"], [class*="col-sm"], [class*="col-xs"] {
        float: none;
    }
}

which may not work for every situation as it removes all the floats. But it was sufficient to get printing working on my relatively simple layout.

Answer 2

I have had same issue in my project. After hours debugging i've discovered that if set the width to 100% on .container all works fine. My solution is:

@media print {
    .container {
        width:100%;
    }
}

Answer 3

I have seen this issue in Chrome 54+, it appears to be caused by the way certain Bootstrap 3 classes are rendered. In my case, I had a div that had the .col-md-12 class, and inside that div I had tabs with fairly complex content. In Print Preview, the last couple of pages were always missing, even though in the dev tools, when enabling the print CSS emulation, all content was present. The .col-md-12 class applies for widths of 992px and beyond, which suggests that .col-lg-12 will probably cause the same print problem. When I removed this class, everything was rendered correctly in print, no missing pages.

I didn't lose much by removing .col-md-12, I just ensured that the top div having the .container class was styled as width: 100%, and also added padding: 0 15px; to the div I mentioned above, which was previously provided by .col-md-12. It is a workaround, but it solves the print truncation problem. The latest version of Chrome (55.0.2883.75 m) behaves exactly the same as 54. Chrome 53 did not have this issue at all, and neither does Firefox or IE, as reported.

Hope this helps.

Answer 4

It's a chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=732834#c12 but you can add the words "screen and" to your bootstrap.min.css in 3 places to fix it:

@media screen and (min-width: 768px) {
  .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;
  }

@media screen and (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

@media screen and (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }