How does Twitter Bootstrap actually work?

How to Create a Printable Twitter Bootstrap Page


I'm using twitter bootstrap and need to be able to print the page as it looks in the browser. I can print other pages created with Twitter Bootstrap fine, but I cannot print my page using only Twitter Bootstrap. Do I miss a day somewhere?

Official TB page when printing:

My page when printing:

What my site actually looks like:


Reply:


Make sure a style sheet is assigned to print.
It could be a separate stylesheet:

or one that you share with all devices:

You can then write your styles for printers using media queries in the separate style sheets or in the shared ones:






Bootstrap 3.2 Update: (current version)

The current stable bootstrap version is 3.2.0.
With version 3.2, visible printing is obsolete, so you should use:

Bootstrap 3 update:

Print classes are now in documents: http://getbootstrap.com/css/#responsive-utilities-print

Bootstrap 2.3.1 version:


After adding the bootstrap.css file to your HTML, find the parts you don't want to print and add a class to the tags. Because the CSS file contains:




Replace all with

eg: replace everyone to.

This is the thing that worked for me to get rid of this problem. You can see what to replace.







There is a section of code snippet in the CSS file (Bootstrap 3.3.1 [UPDATE:] through 3.3.5) that virtually removes all of the styling, so you get pretty boring printouts even if it works.

For now, I had to resort to removing the section from bootstrap.css - which I really do Not am happy but my users want direct screenshots so this has to be done. If anyone knows how to suppress it without changing the bootstrap files I would be very interested.

Here is the 'offensive' block of code starting on line 192:




In case anyone is here for a solution for Bootstrap v2.XX seeks. I'm leaving the solution that I was using. This is not fully tested in all browsers, but it could be a good place to start.

1) Make sure the media attribute is from.

2) Create one and make sure its media attribute

3) Inside, add the "Width" of your website in HTML & Body

4.) Reproduce the required media query classes in as they were inside and we disabled them when printing.

Here is the full version of:



To make the print preview look like a tablet or desktop, include Bootstrap as .less rather than .css. You can then overwrite the bootstrap classes at the end of the bootstrap_variables file as follows:

Don't worry about having these variables at the end of the file. LESS supports lazy loading of variables in order for them to be applied.


If you want to keep columns on A4 print (around 540 pixels) this is a good idea

You can use it like this:

We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are coming from.

By continuing, you consent to our use of cookies and other tracking technologies and affirm you're at least 16 years old or have consent from a parent or guardian.

You can read details in our Cookie policy and Privacy policy.