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

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.

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

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.