Auto page-break in Bootstrap columns

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