Text overlapping in Dompdf Laravel when using grid layout in Bootstrap 4

Question

I tried using Bootstrap 4's grid layout on Dompdf, but the resulting text overlaps, making it unreadable. Initially I used offset-md-4, but it didn't work and I tested it again with col-md-2 and col-md-8, the result was that the text kept piling up.

I used the Laravel Dompdf library.

Here the screenshoot:

This is my HTML code:

<div class="container-fluid">
    <div class="row mt-2">
        <div class="col-md-4">
            <h2>{{$dataStore->name}}</h2>
            <address>
            {{$dataStore->address}}<br>{{$dataStore->city->name}}</address>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-md-12">
            <div class="text-center">
                <h1><span class="font-weight-bold" style="font-size: 24px"><u>BUKTI PENERIMAAN BARANG</u></span></h1>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-md-2">
            <p>Nama Suplier: {{$dataVendor->name}}</p>
            <address>Alamat: {{$dataVendor->address}}</address>
        </div>

        <div class="col-md-8">
            <table>
                <tr>
                    <td>Nomor</td>
                    <td>:</td>
                    <td>&nbsp;{{$dataDokumen->nomorsj}}</td>
                </tr>
                <tr>
                    <td>Tanggal</td>
                    <td>:</td>
                    <td>&nbsp;{{AppHelper::formatTanggal($dataDokumen->created_at)}}</td>
                </tr>
                <tr>
                    <td>PO Store</td>
                    <td>:</td>
                    <td>&nbsp;{{$poStore}}</td>
                </tr>
                <tr>
                    <td>PO Vendor</td>
                    <td>:</td>
                    <td>&nbsp;{{$dataDokumen->nomorpo}}</td>
                </tr>
                <tr>
                    <td>Tracking</td>
                    <td>:</td>
                    <td>&nbsp;{{$dataDokumen->trackingcode}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Answer 1

Bootstrap's Grid system relies on flexbox which was introduced in CSS3. Dompdf only supports CSS 2.1. From the readme:

dompdf is (mostly) a CSS 2.1 compliant HTML layout and rendering engine

You'll need to ensure your HTML does not rely on flexbox, so in this case you'd probably need to change to using more <table> tags to get your desired layout.

---

Alternatively, you can remove Dompdf and change over to a modern PDF library such as Browsershot.

Browsershot is built on Puppeteer, which is a headless version of Chrome, therefore you'll have full CSS support, including flexbox so you can continue to use the full power of Boostrap's grid layout.

From personal experience, I've found Browsershot much more reliable than using Laravel Dompdf or Laravel Snappy (which uses wkhtmltopdf) for generating PDFs.