I tried using bootstrap 4's gridlayout 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 this dompdf: https://github.com/barryvdh/laravel-dompdf

here the screenshoot: https://postimg.cc/v4cxppp6

and this is my html code:

<div >
            <div >
                <div >
                    <h2>{{$dataStore->name}}</h2>
                    <address>
                        {{$dataStore->address}}<br>{{$dataStore->city->name}}</address>
                </div>
        
            </div>
            <div >
                <div >
                    <div ><h1><span 
                                                       style="font-size: 24px"><u>BUKTI PENERIMAAN BARANG</u></span></h1>
                    </div>
                </div>
            </div>
            <div >
        
                <div >
                    <p>Nama Suplier: {{$dataVendor->name}}</p>
                    <address>Alamat: {{$dataVendor->address}}</address>
                </div>
        
                <div >
                        <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>

CodePudding user response：

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.