I am in the process of using dompdf for rendering a PDF file. Our application is built on Bootstrap 4 framework, and I want to incorporate it into the twig template used for generating our documents.
However, I have encountered an issue with the Bootstrap 4 grid system not displaying correctly in the generated PDF: all elements within a single .row div are stacking up on each other.
I have confirmed that the Bootstrap CSS is included in the template.
Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-1">
little text
</div>
<div class="col-xs-11">
<h1>Big title</h1>
</div>
</div>
</div>
The resulting PDF output can be viewed here: https://i.sstatic.net/QfOYm.png
Update: I made a change from col-xs-n to col-n
Updated code:
<div class="container-fluid">
<div class="row">
<div class="col-1">
little text
</div>
<div class="col-11">
<h1>Big title</h1>
</div>
</div>
</div>
New PDF output after the update: https://i.sstatic.net/jFV1m.png