Create PDFs from HTML with Responsive CSS Layouts and Bootstrap with ASP.NET

IronPDF generates PDFs from HTML in C# and can easily render a screen stylesheet to a PDF by default. This is convenient because print stylesheets are rarely as well documented, used or developed as their screen counterparts.

This gives us pixel by pixel rendering accuracy of what you see in the browser into a PDF.

Responsive web design relies on knowing the size of your browser window. When working with responsive design and frameworks such as Bootstrap, we can set a ViewPortWidth and ViewPortHeight (in pixels) to programmatically control this variable and control which version of the responsive site to render as a PDF.

You can learn more by reading the documentation for the ChromePdfRenderer Class.

Programmatically setting your response viewport

using IronPdf;

IronPdf.ChromePdfRenderer Renderer = new IronPdf.ChromePdfRenderer();

 //Choose screen or print CSS media
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

//Set the width of the resposive virtual browser window in pixels
Renderer.RenderingOptions.ViewPortWidth = 1280; 

// Render an HTML document or snippet as a string
Renderer.RenderHTMLFileAsPdf("Assets/Responsive.html");

using IronPdf;

IronPdf.ChromePdfRenderer Renderer = new IronPdf.ChromePdfRenderer();

 //Choose screen or print CSS media
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

//Set the width of the resposive virtual browser window in pixels
Renderer.RenderingOptions.ViewPortWidth = 1280; 

// Render an HTML document or snippet as a string
Renderer.RenderHTMLFileAsPdf("Assets/Responsive.html");

Imports IronPdf

Private Renderer As New IronPdf.ChromePdfRenderer()

 'Choose screen or print CSS media
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

'Set the width of the resposive virtual browser window in pixels
Renderer.RenderingOptions.ViewPortWidth = 1280

' Render an HTML document or snippet as a string
Renderer.RenderHTMLFileAsPdf("Assets/Responsive.html")

VB C#

Screen & Print CSS Types (CSS3)

CSS3 allows some CSS styles only to render into printed documents, and others only to web browsers. IronPDF can be programmed to work with either.

Print CSS is often more appropriate for rendering html-to-pdf than Screen CSS.

We must:

Create and apply a print stylesheet to our HTML: https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
Tell IronPDF to Prefer Print Stylesheets over Screen programmatically.

var Renderer = new IronPdf.ChromePdfRenderer();

Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

using var PDF = Renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/PDF");

var Renderer = new IronPdf.ChromePdfRenderer();

Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

using var PDF = Renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/PDF");

Dim Renderer = New IronPdf.ChromePdfRenderer()

Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

Dim PDF = Renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/PDF")

VB C#