Hi all,

I am converting an XML document to HTML/PDF. I use some of the Twitter Bootstrap 3 classes for layout, but since I pretty much go directly to PDF I have removed most of bootstrap's css (since I am not looking for a responsive layout, I want it to print to PDF exactly as it is viewed in HTML).

Now I seem to have removed a little bit too much CSS, but I cannot figure out exactly what is the cause. I have created a very minimal working (default css) + non-working (custom css) example. When I manually compare the CSS they seem to be identical.

Please read the HTML comments in my example, I have my own findings explained there. Would love some help in getting it fixed :)
http://jsbin.com/datucuhu/1

The issue is - with the CSS as it is in the above example, when I print, the "Test" text should be on a new page (through the break-before class).
This doesn't work with my current CSS, however if you remove the <style> bit and uncomment the default css, it will work and move the "Test" text to a new page when printing.

Thanks!

What are you using to convert over to PDF? I understand that converting to pdf has some limitations when dealing with css.