I have a Bootstrap (v4) Modal that consists of multiple sections, and I am trying to print the content of the modal-body with each section starting on a new page. To achieve this, I have included the following CSS:
section {
page-break-after: always;
}
Despite trying various solutions, I have been unable to get the page-break functionality to work within the modal. I have created an example on CodePen to demonstrate what I am aiming for. Any assistance would be greatly appreciated. Thank you in advance!
Below is the HTML:
<div class="modal-body do-print">
<section>
<h1>Page 1</h1>
<p>
content
</p>
</section>
<section>
<h1>Page 2</h1>
<p>
content
</p>
</section>
</div>
And here is the CSS:
section {
page-break-after: always !important;
margin: 40px;
}