Geek Answers Handbook

Styling Rotativa and Bootstrap Mesh

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

I cannot get Rotativa to render the view correctly using the Bootstrap style. I am trying to create a style using a simple grid layout that Bootstrap does so well. Nothing special.

Here is a screenshot of my Razor View: Razor view

Here is a PDF screenshot: Generated pdf

And here is my content to view:

@{ 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>

Can anyone else work?

+7
twitter-bootstrap asp.net-mvc pdf-generation rotativa
source share
2 answers

I had the same problem. Try using col-xs - # instead of col-md- # / col-sm- #, which works fine for me.

+18
source share

When shortening the browser window, you must set the correct page size and take care of the resolution and breakpoints of Bootstrap.

In the screenshot, I see that you get mobile output when converting to PDF; this means that Bootstrap has detected a small page size and adjusts the style accordingly. By default, Rotativa's page size is A4 by default.

+3
source share

More articles:


All Articles