Bootstrap 5 Print Stylesheet
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
You can include the CSS by either:
bootstrap-print.cssto 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.
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.