How to create a printable Twitter-Bootstrap page
PrintingTwitter BootstrapPrinting Problem Overview
I'm using Twitter-Bootstrap and I need to be able to print the page the way it looks on the browser. I'm able to print other pages made with Twitter-Bootstrap just fine but I can't seem to print my page that uses purely Twitter-Bootstrap. Am I missing a tag somewhere?
Official TB page when printed:
My page when printed:
What my page actually looks like:
Printing Solutions
Solution 1 - Printing
Bootstrap 3.2 update: (current release)
Current stable Bootstrap version is 3.2.0.
With version 3.2 visible-print deprecated, so you should use like this:
Class Browser Print
-------------------------------------------------
.visible-print-block Hidden Visible (as block)
.visible-print-inline Hidden Visible (as inline)
.visible-print-inline-block Hidden Visible (as inline-block)
.hidden-print Visible Hidden
Bootstrap 3 update:
Print classes are now in documents: http://getbootstrap.com/css/#responsive-utilities-print
Similar to the regular responsive classes,
use these for toggling content for print.
Class Browser Print
----------------------------------------
.visible-print Hidden Visible
.hidden-print Visible Hidden
Bootstrap 2.3.1 version:
After adding bootstrap.css file into your HTML,
Find the parts that you don't want to print and add hidden-print
class into tags.
Because css file includes this:
@media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
Solution 2 - Printing
Be sure to have a stylesheet assigned for printing.
It could be a separate stylesheet:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
or one you share for all devices:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute
Then, you can write your styles for printers in the separate stylesheets or in the shared one using media queries:
@media print {
/* Your styles here */
}
Solution 3 - Printing
Replace every col-md-
with col-xs-
eg: replace every col-md-6
to col-xs-6
.
This is the thing that worked for me to get me rid of this problem you can see what you have to replace.
Solution 4 - Printing
There's a section of @media print
code in the css file (Bootstrap 3.3.1 [UPDATE:] to 3.3.5), this strips virtually all the styling, so you get fairly bland print-outs even when it is working.
For now I've had to resort to stripping out the @media print
section from bootstrap.css - which I'm really not happy about but my users want direct screen-grabs so this'll have to do for now. If anyone knows how to suppress it without changes to the bootstrap files I'd be very interested.
Here's the 'offending' code block, starts at line #192:
@media print {
*,
*:before,enter code here
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
select {
background: #fff !important;
}
.navbar {
display: none;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
Solution 5 - Printing
Best option I found was http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/
html2canvas(document.body, {
onrendered: function(canvas) {
$("#page").hide();
document.body.appendChild(canvas);
window.print();
$('canvas').remove();
$("#page").show();
}
});
Solution 6 - Printing
In case someone is looking for a solution for Bootstrap v2.X.X here. I am leaving the solution I was using. This is not fully tested on all browsers however it could be a good start.
-
make sure the media attribute of
bootstrap-responsive.css
isscreen
. -
create a
print.css
and make sure its media attributeprint
-
inside
print.css
, add the "width" of your website in html & bodyhtml, body { width: 1200px !important; }
4.) reproduce the necessary media query classes in print.css
because they were inside bootstrap-responsive.css
and we have disabled it when printing.
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
Here is full version of print.css
:
html,
body {
width: 1200px !important;
}
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
Solution 7 - Printing
2 things FYI -
- For now, they've added a few toggle classes. See what's available in the latest stable release - [print toggles in responsive-utilities.less][1]
- New and improved solution coming in Bootstrap 3.0 - they're adding a separate print.less file. See [separate print.less][2]
[1]: https://github.com/twitter/bootstrap/blob/0fe9148b91eff50b83100b6795fb49cf894caed1/less/responsive-utilities.less "print toggles in responsive-utilities.less" [2]: https://github.com/twitter/bootstrap/blob/0dea8b0c7473c1db4aea7accfd0a68cbf09b9576/less/print.less "separate print.less"
Solution 8 - Printing
To make print view look like tablet or desktop include bootstrap as .less, not as .css and then you can overwrite bootstrap responsive classes in the end of bootstrap_variables file for example like this:
@container-sm: 1200px;
@container-md: 1200px;
@container-lg: 1200px;
@screen-sm: 0;
Don't worry about putting this variables in the end of the file. LESS supports lazy loading of variables so they will be applied.
Solution 9 - Printing
If you want to keep columns on A4 print (which is around 540px) this is a good idea
@media print {
.make-grid(print-A4);
}
.make-print-A4-column(@columns) {
@media print {
float: left;
width: percentage((@columns / @grid-columns));
}
}
You can use it like this:
<div class="col-sm-4 col-print-A4-4">