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

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="row-fluid">
                <div style="height: 150px; width: 300px">
                    <img class="img-rounded" src='data:image/png;base64,@Model.Unit.Image64' />
                </div>
            </div>

            <div class="row-fluid">
                ...
            </div>

        </div>
        <div class="span4">
            ...Pie chart control
        </div>
        <div class="span5">
            ...Bar chart control
        </div>

    </div>
</div>

Here's my print.css:

@media print {
    body {
        margin: 0;
        padding: 0;
        line-height: 1.4em;
        word-spacing: 1px;
        letter-spacing: 0.2px;
        font: 13px Arial, Helvetica,"Lucida Grande", serif;
        color: #000;
    }

    #print-btn #update-btn #nav-left #nav-bar, #selectUnitContainer, .navbar, .sidebar-nav {
        display: none;
    }

    #print-btn, #update-btn, #units {
        display: none;
    }

    #nav-left {
        display: none;
    }

    #report-container {
        visibility: visible;
    }

    .well .span12{
        width: 100%;
        visibility: visible;
    }

    .navbar {
        display: none;
    }

    .sidebar-nav {
        display: none;
    }
}

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