PHP | Why HTML to PDF does not show same styling as on HTML page?

Sometimes, HTML to PDF conversion does not show the same styling in PDF as it shows in HTML.

There are several reasons for that such as :

1. Bootstrap classes:

Using bootstrap classes in creating PDF could be the problem. A4 paper size has different width and height than our screen size. Generally it take sm or xs screen type.

2. CSS:

We should create custom css for our PDF layout as direct HTML page CSS may not work well for the PDF display. Like in case of margin it could look different in PDF than HTML.

//give margin to PDF page from all sides:

$mPDF=new mPDF('utf-8','A4','','','15','15','28','18');
$mPDF->setAutoTopMargin = 'stretch';
$mPDF->setAutoBottomMargin = 'stretch';
$mPDF->SetHTMLHeader('<div><img  style=" background-position:left top; "src="../img/Just-Blue-Wings-22381_74x74.jpg" ></div>');
$mPDF->SetHTMLFooter('<div>
<br><b>*Please, email this document to <a href="coach@abc.com">coach@abc.com&lt/a>
every Friday before 3:00 PM PST</b>
<div style="margin-left: 37.5%; font-size: 60%;" >
http://www.abc.com 
</div>
</div>');

We should specify header and footer of the page in mPDF or fPDF (whichever tool you use) declaration only.