Auto page-break in Bootstrap columns - css

Question

I am working on a print stylesheet for a web application. The application uses bootstrap. Every page should be printable and as much whitespace should be removed as possible.
My problem involves the following HTML code:
<div class="row">
<div class="col-xs-6">
<div class="line">...</div>
<div class="line">...</div>
<div class="line">...</div>
</div>
<div class="col-xs-6">
<div class="line">...</div>
<div class="line">...</div>
<div class="line">...</div>
</div>
</div>
I have a two column layout and each column features several lines. Is there a way to enable page-break between lines in the columns?
The columns can have a lot of lines and I want to avoid that the whole div is shifted to a new page. Instead I want to have a page-break between the lines of the div.
I think the main problem I am facing is that I have table that is constructed column by column and not row by row like a normal HTML table.

Answer 1

You're right: because this is structured as css columns instead of as a <table>, you won't be able to do this without using a script to heavily modify the DOM.
But the solution isn't too tricky. Let's think about what you want: a grid that #media screen has three rows and on #media print puts each row on its own page. If each row was grouped in a single element, you could use the page-break-after and/or page-break-before CSS properties to put each row on its own page. In your markup each row is
.row .col-x .line
which both gets in the way of your print formatting and isn't semantic. Let's make each row a .row!
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
#media print {
.rows-print-as-pages .row {
page-break-before: always;
}
/* include this style if you want the first row to be on the same page as whatever precedes it */
/*
.rows-print-as-pages .row:first-child {
page-break-before: avoid;
}
*/
}
<div class="container rows-print-as-pages">
<div class="row">
<div class="col-xs-6">first row left</div>
<div class="col-xs-6">first row right</div>
</div>
<div class="row">
<div class="col-xs-6">second row left</div>
<div class="col-xs-6">second row right</div>
</div>
<div class="row">
<div class="col-xs-6">third row left</div>
<div class="col-xs-6">third row right</div>
</div>
</div>
(Here the breaks don't go in the right place without a .container. Depending on the rest of you page, the .container may not be necessary.)
Checking #media print styles is a little inconvenient, but you can do it by making a demo in codepen, selecting the "debug" view, and then looking at the print preview or saving as a pdf. Here's a link to the codepen debug view of the above snippet