Bootstrap 5 Print Stylesheet

Posted on

Bootstrap 5 no longer includes custom CSS to enhance the layout when printing (to paper or as a PDF). I’ve bundled up the Print styles from Bootstrap 4 and published them to npm for easy use within projects.

Note: This should improve the experience when printing, but there are bugs and inconsistencies with the way that browsers handle printing so testing is recommended.

Quick Start

  • Download the latest release
  • Clone the repo git clone https://github.com/coliff/bootstrap-print-css.git
  • Install with npm npm install bootstrap-print-css
  • Install with yarn yarn add bootstrap-print-css

Usage

You can include the CSS by either:

  • Importing the bootstrap-print.css to your main CSS. This will mean one less HTTP request compared to loading it separately. (Recommended)

  • Loading it as a separate CSS file:

    <link rel="stylesheet" href="/css/bootstrap-print.min.css" media="print">
    

    It’s available on CDN too if you prefer:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-print-css/css/bootstrap-print.min.css" media="print">
    

You can prevent any elements you’d like to be not printed with Bootstraps’s .d-print-none utility class. You may want to consider adding that to ads, navbars, footers etc.

Contributing

For any Bootstrap 5 specific changes please open a PR or an issue at GitHub and for general improvements to the stylesheet please make open a PR or an issue upstream at main.css .

How can I test this?

Screenshot of the emulate Print Stylesheet in Microsoft Edge Dev Tools

Credits & Thanks

All credit for the CSS work goes to the HTML5 Boilerplate and Bootstrap teams. I’ve just copied the Bootstrap 4 print styles and packaged them up for Bootstrap 5.

You might also like