My goal is to print a basic bootstrap page using window.print(). Here is what the page looks like (with multiple div.col-md-12 & cards) :
<div class="overview"> <!-- Takes up entire screen width -->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">Test</div>
<div class="card-body">
<!-- Insert some long Lorem Ipsum text here -->
</div>
</div>
</div>
</div>
</div>
I am looking to print this page without breaking the div.card elements. I have tried various solutions found on StackOverflow, but none have been successful.
<div class="card" style="page-break-inside:avoid;page-break-before:always;">
Even when placed in an external CSS media print, this method did not work. Applying these CSS attributes to div.col-md-12 also did not yield the desired result.
Any suggestions?