Bootstrap: Problems printing in landscape

[mark-nicholson]

Hi,
I spent the afternoon trying to figure out why I cannot print bootstrap 4 pages in landscape in Chrome.

I am running:
- Ubuntu 16.04
- Chrome: 64.0.3282.167 (Official Build) (64-bit)

My test file originates from the 'demo' baseline posted on your website. It actually uses NO bootstrap classes or functionality at all. It is the simple inclusion of the public CSS file which introduces the issues.

(Oddly, I tried to drag-and-drop the HTML file into this bug and it complains that HTML files are 'not supported' ...)

Sooooo, here it is:

<!-- Bootstrap CSS 
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  crossorigin="anonymous">
-->

<!-- My Tweaked version of the above -->
<link rel="stylesheet" href="/nih/bootstrap/4.0.0/bootstrap.css">

<title>Basic</title>

<div>
  <h3>This is a basic heading</h3>
  <p>Some generic test text</p>
</div>

<footer>
  <p id=date></p>
</footer>

<script type="text/javascript">
  var el = document.getElementById('date');
  var cdate = Date();
  el.innerHTML = cdate;
</script>

<!-- jQuery stuff first -->
<script
   src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
   integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
   crossorigin="anonymous"></script>

<!-- Popper.js second -->
<script
   src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
   integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
   crossorigin="anonymous"></script>

<!-- Bootstrap JS third -->
<script
   src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
   integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
   crossorigin="anonymous"></script>

To reproduce:

1. Load this html code on Chrome
2. Hit Ctrl-P to go into "print" mode
   Watch carefully as the "Layout" option will very briefly appear, then be removed so you CANNOT select between "Portrait" and "Landscape" modes.

Now, I traced this pesky issue down to this patch:

--- bootstrap.css 2018-01-18 10:41:15.000000000 -0800
+++ nih/bootstrap/4.0.0/bootstrap.css 2018-02-14 15:48:45.268666092 -0800
@@ -8945,9 +8945,9 @@ a.text-dark:hover, a.text-dark:focus {
h3 {
page-break-after: avoid;
}
- @page {
+ /@page {
size: a3;
- }
+ }/
body {
min-width: 992px !important;
}

Basically, there seems to be an errant @page {} definition in the basic CSS code. There is NO reason for this as the framework has no way of predicting what page-size to expect. (Not to mention A3 is a bit of an odd one to choose...)

For reasons I cannot explain, hard-coding my own @page {} block in my private CSS file would not "override" the one in bootstrap.css.

Hopefully this can be a quick patch to the main line.

Firefox (58.0.2 64-bit) does not demonstrate the same issue. It seems to be able to ignore the @page tag completely and resets the default to the printer's 'default page size' (in my case US-Letter)

[nguyencongvu]

I use the latest bootstrap and I have same issue, too. No options for layout!
Print another normal webpage (not bootstrap) is ok

[Morgul]

For those using the SCSS/SASS build (webpack, grunt, etc), you can just do this:

$print-page-size: auto;

Make sure to set it before you import anything from bootstrap.

[nip3o]

This issue also happens on the Bootstrap demo pages, for example when trying to print https://getbootstrap.com/docs/4.0/examples/album/. Note that it is possible to change the printing to landscape when printing using system dialog, but the result is completely broken.

• Mac OS X 10.13.4
• Chrome: 66.0.3359.139 (Official Build) (64-bit)

[Kalten70]

I also had this problem with the latest Bootstrap v4.1.1. As a workaround, adding this css rule after Bootstrap js/css loaded has fixed it for me.

@page { size: auto }

This re-enables the print layout option in Chrome.

• Mac OS X 10.13.4
• Chrome: 67.0.3396.87 (Official Build) (64-bit)

[MartijnCuppens]

We've removed the print hacks in v5. As for v4, I would indeed suggest using @page { size: auto }. Not planning on fixing this, since it might reintroduce other issues we had before.