Here are some steps to follow on styling your print layout.
A. Best practice is to create a separate css file for printing web document. I’ll call it print.css.
B. Include print css on the web document’s head like this:
<link rel="stylesheet" href="print.css" media="print">
Take note of the attribute “media” with a value of “print”. This tells the browser to use the style sheet on print mode.
C. Start writing your css on print mode. Here are some basic styles to build upon.
* {
box-shadow: none!important;
text-shadow: none!important;
}
a[href]:after {
content: ": " attr(href)" "
}
a.mail-to[href]:after,
a.call-to[href]:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: ""
}
a[href]{
text-decoration: none;
}
D. Keep in mind that Bootstrap also has some built-in css classes for printing.
1. hidden-print - hides element during print mode.
2. visible-print - shows element during print mode.
3. visible-print-block
4. visible-print-inline
5. visible-print-inline-block