Bootstrap not working inside pdf

Question

This is my controller code

public function actionPrint_death_certificate1()
    {

        $this->layout   =   'certificate';


        $html   =   $this->render('test');
        require_once(Yii::$app->basePath . "/../vendor/mpdf/mpdf/mpdf.php");
        $mpdf=new mPDF();
        $mpdf->WriteHTML($html);
        $mpdf->Output();

    }

My view

<div class="container">
    <div class="row">
        <div class="col-md-6">
        Heading1
        </div>
        <div class="col-md-6">
        Heading2
        </div>
    </div>
</div>

Now i get a pdf with heading1 and heading2 in two different lines. Bootstrap is not working. Am i missing something?

return $this->render('test');

When i tried this one it is working and heading1 and heading2 is coming in one line. In pdf it is not working

Answer 1

You can use the function $mpdf->WriteHtml($stylesheet, 1) to add custom stylesheets within your pdf, for more information you can check this link http://mpdf1.com/manual/index.php?tid=254

public function actionPrint_death_certificate1()
{
    $this->layout = 'certificate';
    $html = $this->render('test');
    $stylesheet = file_get_contents('style.css');
    require_once(Yii::$app->basePath . "/../vendor/mpdf/mpdf/mpdf.php");
    $mpdf = new mPDF();
    $mpdf->WriteHTML($stylesheet, 1);
    $mpdf->WriteHTML($html);
    $mpdf->Output();
}

Answer 2

I posted an issue in github and mpdf guys told that bootstrap not supported out-of-the-box inside mpdf and you have to use some custom style. Github link

Answer 3

From @Bloodhound post - this solution works for me well

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    border:0;
    padding:0;
}