Rotativa and Bootstrap Grid Styling

I had a same issue. Try to use col-xs-# instead col-md-# / col-sm-#, that works for me perfectly.

I have found a workaround here. After html

<div class="row printDetails">
   <div class="col-5" style="background-color:lavender;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
   <div class="col-6" style="background-color:lavenderblush;">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
   </div>
</div>

you should make a css class to display inline block. So in your case:

.printDetails > div {
   display: inline-block;
}

Also notice the row amount is 5 and 6 or 5 and 5 depending on the page size, some of the width goes for pdf size margin which is weird why it doesn't get the exact size as mobile version which is taking Rotativa.

Hope it helps someone.

Update

As @Erdogan replied, and after checking his link I tested the code that he probably thought I have to check.. I'm referencing here the code:

just added a CSS class at the same level as uk-grid called "flexrow" and another one for my divs.

.flexrow {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex !important;
}         
.flexrow > div {             
   -webkit-box-flex: 1;             
   -webkit-flex: 1;             
   flex: 1;         
}

Got this: Here in some of the comments

You should set correct page size and take care of resolution and Bootstrap breakpoints when shrinking browser window.

From the screenshot I can see the you get mobile output when converted to PDF; that means Bootstrap has detected small page size and it adjusts style accordingly. Default Rotativa page size is A4, I think.