Printing Twitter Bootstrap correctly

Question

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\"

Answer 1

Firstly Bootstrap.css does come with pre-defined print styles such as:

/** 
 *  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!):

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="screen" />

to:

<link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="all" />