Printing Bootstrap

I love Bootstrap. Mobile is the future. Bootstrap is the means. Unfortunately many of my customers still want to print everything. Turns out Bootstrap is not great in print. If you google around you will see a few suggestions for how to hack CSS to make Bootstrap work in print. I tried them and could not get them to work.

One possible solution would be to use reportlab to generate a PDF and download it like this. I have used reportlab in the past and really liked it. If you want fine-tuned control of the PDF, reportlab is still probably the best solution. But with it’s power comes complexity. It’s overkill for my needs.

If it were not for Bootstrap, I would definitely just go with a CSS for print. But wait! I can still do that. The solution I settled on was to render the Bootstrap HTML into one div and the old-school HTML into another div. Then I used CSS to control which div is displayed:

@media screen {
    .for_print{
        display: none;
    }

    .for_screen{
        display: block;
    }

}

@media print {
    .for_print{
        display: block;
    }

    .for_screen{
        display: none;
    }
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s