Rotativa.AspNetCore Bootstrap 4.3.1 grid does not render in PDF

Environment

Rotativa.AspNetCore (built from source with no modifications)
macOS 10.14.6
dotnet core 3.0.0-preview7
Bootstrap 4.3.1

Problem

The PDF output does not render the Bootstrap Grid columns horizontally. Instead the PDF displays the columns as stacked vertically. This is not the same as the HTML output, which does render columns horizontally as expected.

Note that other Bootstrap components, such as alerts and cards render correctly. As do the viewport breakpoint display helpers such as .d-lg-none and .d-sm-inline.

View:

@model DemoTemplateViewModel
@{
	Layout = null;
}

<html !html>
	<head>
		<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
		<style type="text/css">

		</style>
	</head>
	<body>
<div class="row">
	<div class="col-3">From:</div>
	<div class="col-9">Your Glorious and Benevolent Leader</div>
</div>
	</body>

	<script src="~/lib/jquery/dist/jquery.js"></script>
	<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</html>

Controller

[HttpGet]
[Authorize]
public async Task<IActionResult> PreviewTemplate(string id) {
	DemoTemplateViewModel model = await GetDemoTemplateViewModel(id);
	if(Request.Query["view"] == "html") {
		return View(model);
	}
	return new ViewAsPdf(nameof(PreviewTemplate), model) {
		CustomSwitches = "--print-media-type --viewport-size 1024x768",
		PageOrientation = Rotativa.AspNetCore.Options.Orientation.Portrait,
		PageSize = Rotativa.AspNetCore.Options.Size.Letter,
		PageMargins = new Rotativa.AspNetCore.Options.Margins(7, 7, 7, 7),
		IsJavaScriptDisabled = false
	};
}

PDF Output

From:
Your Glorious and Benevolent Leader

The output has the columns stacked vertically instead of horizontally.

Other stuff

If I add a bootstrap alert it is rendered properly - so the bootstrap css file is being imported correctly.

Aug 15 '19 17:08 DWAK-ATTK

Same here, any news about that?

Rotativa.AspNetCore 1.1.1
dotnet core 2.2
Bootstrap 4.3.1

Sep 20 '19 10:09 jmmoyadev

I have found a workaround here. After html

<div class="row printDetails">
	<div class="col-3">From:</div>
	<div class="col-7">Your Glorious and Benevolent Leader</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 3 and 7 or 3 and 8 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.

Apr 21 '20 01:04 edihasaj

thank you @edihasaj , it works.

Jan 06 '21 18:01 SebasCharria

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">

Jan 27 '21 13:01 zakarea-Tfaili

@zakarea-Tfaili I know this is years later.

But I just wanted to say thank you so much for that suggestion. It was exactly what I needed.

I thought I was losing my mind for a second when it wasn't working. It's weird cause on an div with no class it works fine. But if I add an additional styling or class then I needed your code.

Oct 26 '23 20:10 Shadow1307