I've browsed through several SO questions, but haven't quite found a complete solution. My project involves using bootstrap with HTML 5 to create a page suitable for printing on standard paper sizes like 8.5x11 or A4 for reports. However, I'm encountering various issues when it comes to the printing process.
Whenever I try to print using ctrl+p, the bootstrap cells end up stacking on top of each other and lose their original formatting from the desktop view. Additionally, any extra styling such as font colors doesn't seem to appear in the print preview. The margins also lack consistency. How can I effectively utilize bootstrap to design a report page that maintains its appearance across both the desktop and printed versions?
Let me provide a brief snippet of the code I'm working with:
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Person Name</h2>
</div>
<div class="col-sm-6">
<p>Height</p>
</div>
</div>
</div>
CSS
@media print{
@page {
size: A4;
margin: 0cm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
}
nav {
display: none;
}
}
Upon printing, instead of "Person Name" and "Height" appearing side by side as intended, they are stacked vertically, unlike how they appear on the desktop view.
Your assistance on this matter would be greatly appreciated! Thank you!