Despite the abundance of questions on this topic, I have yet to find a viable solution. Here is my HTML code:
<div class="row">
<div class="col-xs-12">
<div class="row print-break">
<div class="col-xs-8 col-xs-offset-2">
<!-- Some Content -->
</div>
</div>
<div class="row print-break">
<div class="col-xs-8 col-xs-offset-2">
<!-- Some Content -->
</div>
</div>
<div class="row print-break">
<div class="col-xs-8 col-xs-offset-2">
<!-- Some Content -->
</div>
</div>
</div>
</div>
Accompanied by the CSS:
@media print {
.print-break {
page-break-after: always;
page-break-inside: avoid;
}
}
I've observed that Firefox correctly inserts page breaks, but Chrome and Safari do not follow suit.
If anyone has insight on how to resolve this issue or can point out any mistakes I may be making, I'd greatly appreciate it.