Bootstrap 5 Print Stylesheet
Contents
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?
- Chrome/Edge Dev Tools offers Print style emulation .
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.