Rotativa and Bootstrap Grid Styling

Asked 12/3, 2015 at 9:30 Answered 27/1, 2021 at 13:47

Solved asp.net-mvc twitter-bootstrap pdf-generation rotativa

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?

Mccusker answered 12/3, 2015 at 9:30 Comment(0)

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

Grisaille answered 17/3, 2015 at 23:33 Comment(7)

oh snap, this worked! Thanks so much for posting this answer – Secor 4/3, 2017 at 1:7

Thanks for your answers. it works like a charm. If possible, can you tell me why col-sx-# is working? – Chaos 5/11, 2017 at 16:34

@Chaos no problem. Happy to help. I beleave the answer in source code of rotativa lib, didn't check to be honest. – Grisaille 10/11, 2017 at 3:51

Wow that helped. Thank you – Moreno 26/10, 2018 at 15:31

@Grisaille I'm using the latest bootstrap, the col-xs-# does'nt exists anymore, Any suggestions? – Schlieren 20/6, 2019 at 7:35

@Schlieren have you tried .col-# , based on bootstrap documentation that's a new extra-small? – Grisaille 24/6, 2019 at 6:24

col-xs-#, col-sm-#, or col-# don't work in bootstrap 4.1 – Deaconry 31/5, 2020 at 10:49

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.

Rebatement answered 16/3, 2015 at 16:2 Comment(0)

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

Ima answered 21/4, 2020 at 11:21 Comment(2)

Thanks Edi, It worked but not a good solution, please check Luis Hongo's answer. It's a good solution. https://mcmap.net/q/903182/-rotativa-generated-pdf-not-respecting-uikit-grid/1327316 – Deaconry 31/5, 2020 at 12:45

The update was the only thing that helped me in bootstrap 5 – Arielariela 22/4, 2022 at 19:31

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>

Festive answered 20/7, 2020 at 22:15 Comment(0)

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

Helpmate answered 27/1, 2021 at 13:47 Comment(0)

Recommended topics

Hot tags