The Bootstrap style sheets contain specific styles for print output. Since PDFreactor produces paged output (such as PDFs), it evaluates styles inside the "@media print {...}" rules not not inside "@media screen {...}" rules. Since CSS frameworks like Bootstrap heavily focus on browser output, the styles might not always look as expected in print or PDF.

We have observed that Bootstrap's print styles for example disable the styling of links and append the link’s URL to the link text. This is a consequence of PDFreactor evaluating these print styles, where browsers do not.

Furthermore, Bootstrap usually contains responsive styles. This means that different styles are applied depending on the viewport width. For an A4 page, PDFreactor’s viewport is only about 794px wide according to the CSS standard resolution. In Bootstrap, such a small viewport is usually associated with a mobile device and it will use appropriate styles, such as converting columns to full width.

To get output similar to a browser’s, it is best to override the "width" media feature value of PDFreactor so that it applies the same styles as the browser. This can be done with the "mediaFeatureValues" configuration property like this:

    new MediaFeatureValue()

The example above sets the media feature "width" to a value of "2480px". This way, styles that are designed for mobile devices will not be applied and styles for desktops will be used instead, since the viewport width is treated as if it was 2480px.

More code examples can be found in the PDFreactor manual.