Rotativa and Bootstrap Grid Styling

Question

I am working on an ASP.NET MVC 5 project and using Rotativa to generate PDF documents from Razor views.

I can't seem to get Rotativa to render the the view properly using Bootstrap styling. I'm trying to style the view using the simple grid layout that Bootstrap does so well. Nothing too fancy.

Here is a screenshot of my Razor View:

Here is a screen shot of the PDF: Generated PDF

And here is my view's content:

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
        <h1>Hello World!</h1>
        <p>Resize the browser window to see the effect.</p>
        <div class="row">
            <div class="col-sm-6" 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-sm-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>
    </div>

</body>
</html>

Has any one else been able to get this working?

score 37 · Accepted Answer · answered Mar 17 '15 at 23:33

37

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

answered Mar 17 '15 at 23:33

Aleksei

1,107
9
13

1

oh snap, this worked! Thanks so much for posting this answer – Michael McCarthy Mar 04 '17 at 01:07
Thanks for your answers. it works like a charm. If possible, can you tell me why col-sx-# is working? – Thomas.Benz Nov 05 '17 at 16:34
@Thomas.Benz no problem. Happy to help. I beleave the answer in source code of rotativa lib, didn't check to be honest. – Aleksei Nov 10 '17 at 03:51
1

Wow that helped. Thank you – Harry .Naeem Oct 26 '18 at 15:31
@Aleksei I'm using the latest bootstrap, the `col-xs-#` does'nt exists anymore, Any suggestions? – Joji Jun 20 '19 at 07:35
@Joji have you tried .col-# , based on bootstrap documentation that's a new extra-small? – Aleksei Jun 24 '19 at 06:24
col-xs-#, col-sm-#, or col-# don't work in bootstrap 4.1 – Erdogan May 31 '20 at 10:49

score 3 · Answer 2 · edited Mar 16 '15 at 16:36

3

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.

edited Mar 16 '15 at 16:36

Jørgen R

10,568
7
42
59

answered Mar 16 '15 at 16:02

MilosR

31
1

Edi · Answer 3 · 2020-06-12T21:35:36.320

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

Thanks Edi, It worked but not a good solution, please check Luis Hongo's answer. It's a good solution. https://stackoverflow.com/q/57862337/1327316 — Erdogan, May 31 '20 at 12:45

score 0 · Answer 4 · answered Jul 20 '20 at 22:15

0

For bootstrap 3, Do the following:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
     another tags ...
</div>

For bootstrap 4, Do the following:

    <div class="col-6 col-sm-6 col-md-6 col-lg-6">
         another tags ...
    </div>

answered Jul 20 '20 at 22:15

RainyTears

171
4

score 0 · Answer 5 · answered Jan 27 '21 at 13:47

For bootstrap4 add the following styles

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

Then add flexrow beside each row class in the HTML

<div class="row flexrow"> </div>

Thanks to link

Rotativa and Bootstrap Grid Styling

5 Answers5