It's quite a challenging situation. My response does not provide a direct solution.
In the context of my code snippet below, the issue arises with scaling. If my .page div was embedded in an <iframe> and then scaled using CSS transform, it would simulate the appearance of an A4 single-page document (similar to a PDF). This means that as you scale down for mobile viewing, the .page would shrink like a previewed A4 document.
However, there are other considerations to take into account such as multiple-page overflow, print margins, web responsiveness, which can make things more complex.
The most reliable approach is to simply utilize Bootstrap's standard .container class on a div and construct your page content within it. By doing this, you can handle overflow onto multiple pages effortlessly. Just leverage Bootstrap's basic CSS classes for text, tables, and other elements to achieve the desired outcome.
Bootstrap is well-equipped to manage these requirements effectively. Additionally, you can incorporate an additional @media print style to eliminate padding on .container so that your content fills the printed page appropriately.
Below is an experimental piece of code I came up with, but I must emphasize that it may not be the optimal solution depending on your specific needs.
Practicality should be your guiding principle in this scenario.
BODY {
background: darkgray;
min-height: 100%;
padding: 30px;
}
.page {
height: 0;
padding-top: calc(100% / 8.27 * 11.65);
overflow: hidden;
background: #fff;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
position: relative;
}
.page-inner {
position: absolute;
top: calc(100% / 11.65);
right: calc(100% / 8.27);
bottom: calc(100% / 11.65);
left: calc(100% / 8.27);
}
@media print {
BODY {
background: none;
padding: 0;
}
.container {
width: 100%;
padding: 0;
}
.page {
background: none;
box-shadow: none;
}
.page-inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="container">
<div class="page">
<div class="page-inner">
<h1 class="display-4">Display test title for print</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus aliquet turpis, vel luctus sapien ullamcorper sed. Donec sit amet arcu ut urna tempus consectetur cursus porttitor justo. Vivamus vitae mollis nunc. Donec blandit euismod tristique.
Nam at sem non urna vehicula hendrerit non ac dui. Sed imperdiet lorem at nisi lacinia, in vehicula eros feugiat. Nulla vitae vulputate mauris, malesuada vulputate erat. Donec eleifend augue eros, at scelerisque ex suscipit in.</p>
<p>Donec bibendum purus nec fringilla hendrerit. Etiam commodo viverra lorem a hendrerit. Etiam venenatis ultrices ante venenatis facilisis. Nunc purus massa, tincidunt a sollicitudin quis, euismod nec ligula. Donec feugiat enim ac sapien sodales,
id vehicula diam pharetra. Fusce auctor quis risus pellentesque sagittis. Sed fermentum orci odio, et consectetur velit maximus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus congue
ac erat eu vestibulum.</p>
<hr/>
<h2>Sub test title for print</h2>
<p>Mauris id turpis a nisi tempus ullamcorper. Mauris id pharetra ante, id consectetur erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam leo, facilisis tempus mauris nec, porttitor ultrices leo. Vestibulum vehicula ullamcorper
consequat. Maecenas viverra sollicitudin libero, ut faucibus metus tristique sed. Etiam purus magna, luctus non iaculis luctus, molestie nec justo. In molestie, lectus eget feugiat vehicula, nisi libero pulvinar justo, vitae hendrerit mi odio
a erat. In malesuada eros eu libero varius, sed convallis turpis rutrum. In eu tortor sed elit bibendum volutpat blandit eget ipsum. In varius ex fermentum nisi mattis, id vehicula purus efficitur.</p>
</div>
</div>
</div>