Bootstrap 4 grid layout not working with dompdf

user_11712766 0
Viewed 8480

I am using dompdf to render a PDF document. We use Bootstrap 4 on the whole application, so I would like to be able to use it in the twig template used to generate our document.

Currently, I'm facing a problem with Bootstrap 4 grid system not rendering well in the generated PDF: the element in a same .row div all pile up.

I'm sure the Bootstrap CSS is loaded in the template.

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 generated PDF: screenshot of a pdf with all the text piled up

Update: with col-n instead of col-xs-n

My 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>

screenshot of a pdf with all the text piled up

dompdf bootstrap-4 pdf css html
2 Answers

try this class .col-1 and .col-11, or .col-sm-1 .col-sm-11

avaible:

.col-   .col-sm-    .col-md-    .col-lg-    .col-xl-

col-xs it's for bootstrap 3

user_85202510

I had the same problem.

using col-

Than I found this issues related at: https://github.com/barryvdh/laravel-dompdf/issues/653

One tip tha I tried was changing the class col- to col-xs- than the layout is better now. Not perfect as in browser but better than before.

I'm using bootstrap v4.4.1.

Pdf after change: after change col- to col-xs-

user_86857370
Related