I'm really struggeling to print my Twitter Bootstrap views correctly, and was wondering if anyone could point me in the right direction. I've added a custom "print.css" which overrides some of the original bootstrap styling, as well of styling some of my own components.
This is my print dialog:
Not sure if you can tell so easily from the image, but the well has lost its background as well as not spanning across the entire page width. Also, the 'columns' or 'spans' seem to be all wonky. Page is built up like this: (Only showing first row to keep it clean)
/**
* Use these for toggling content for print.
**/
.visible-print {
display: block !important;
}
.hidden-print {
display: none !important;
}
Secondly you can test with page-break css rule to separate the charts onto different pages for cleaner formatting.
/**
* Page-break-inside seems to
* be required for Chrome.
**/
div.somechart {
page-break-after: always;
page-break-inside: avoid;
}
Third test with formatting with the rows to take up the full width on print screen rather than relying on percentages of the span3/col-*-3's and span4/col-*-4's, because it would seem they are behaving correctly in some way when you take into account:
Sytem printing page margins
Bootstrap's @print defined margins
Page gutters
span percentages at print screen.
Finally the last small thing that's helpful to note (Yes, despite the custom @print style!):
