How to create a printable Twitter-Bootstrap page

Question

I m using Twitter-Bootstrap and I need to be able to print the page the way it looks on the browser  I m able to print other pages made with Twitter-Bootstrap just fine but I can t seem to print my page that uses purely Twitter-Bootstrap  Am I missing a tag somewhere   Official TB page when printed    My page when printed    What my page actually looks like

User · Answer

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

@media print {
    .make-grid(print-A4);
}

.make-print-A4-column(@columns) {
    @media print {
        float: left;
        width: percentage((@columns / @grid-columns));
    }
}

You can use it like this:

<div class="col-sm-4 col-print-A4-4">

User · Answer

In case someone is looking for a solution for Bootstrap v2 X X here  I am leaving the solution I was using  This is not fully tested on all browsers however it could be a good start   1  make sure the media attribute of bootstrap-responsive css is screen    lt link href   css bootstrap-responsive min css  rel  stylesheet  media  screen    gt    2  create a print css and make sure its media attribute print   lt link href   css print css  rel  stylesheet  media  print    gt    3  inside print css  add the  width  of your website in html  amp  body  html   body       width  1200px  important      4   reproduce the necessary media query classes in print css because they were inside bootstrap-responsive css and we have disabled it when printing    hidden display none visibility hidden   visible-phone display none important   visible-tablet display none important   hidden-desktop display none important   visible-desktop display inherit important    Here is full version of print css   html   body       width  1200px  important      hidden display none visibility hidden   visible-phone display none important   visible-tablet display none important   hidden-desktop display none important   visible-desktop display inherit important

User · Answer

Be sure to have a stylesheet assigned for printing  It could be a separate stylesheet    lt link rel  stylesheet  type  text css  media  print  href  print css  gt    or one you share for all devices    lt link rel  stylesheet  type  text css  href  bootstrap min css  gt    Note there s no media attribute   Then  you can write your styles for printers in the separate stylesheets or in the shared one using media queries    media print          Your styles here

User · Answer

Best option I found was http   html2canvas hertzen com  http   jsfiddle net nurbsurf 1235emen   html2canvas document body        onrendered  function canvas            page   hide        document body appendChild canvas       window print           canvas   remove            page   show

User · Answer

To make print view look like tablet or desktop include bootstrap as  less  not as  css and then you can overwrite bootstrap responsive classes in the end of bootstrap variables file for example like this    container-sm       1200px   container-md       1200px   container-lg       1200px   screen-sm          0    Don t worry about putting this variables in the end of the file  LESS supports lazy loading of variables so they will be applied

User · Answer

Replace every col-md- with col-xs-  eg  replace every col-md-6 to col-xs-6   This is the thing that worked for me to get me rid of this problem you can see what you have to replace

User · Answer

Bootstrap 3 2 update   current release   Current stable Bootstrap version is 3 2 0  With version 3 2 visible-print deprecated  so you should use like this   Class                        Browser    Print  -------------------------------------------------  visible-print-block         Hidden        Visible  as block   visible-print-inline        Hidden        Visible  as inline   visible-print-inline-block  Hidden        Visible  as inline-block   hidden-print                Visible       Hidden   Bootstrap 3 update   Print classes are now in documents  http   getbootstrap com css  responsive-utilities-print  Similar to the regular responsive classes         use these for toggling content for print   Class            Browser    Print  ----------------------------------------  visible-print   Hidden     Visible  hidden-print    Visible    Hidden   Bootstrap 2 3 1 version   After adding bootstrap css file into your HTML  Find the parts that you don t want to print and add hidden-print class into tags  Because css file includes this    media print      visible-print    display  inherit  important       hidden-print     display  none  important

User · Answer

There s a section of  media print code in the css file  Bootstrap 3 3 1  UPDATE   to 3 3 5   this strips virtually all the styling  so you get fairly bland print-outs even when it is working   For now I ve had to resort to stripping out the  media print section from bootstrap css - which I m really not happy about but my users want direct screen-grabs so this ll have to do for now  If anyone knows how to suppress it without changes to the bootstrap files I d be very interested    Here s the  offending  code block  starts at line  192    media print            before enter code here     after       color   000  important      text-shadow  none  important      background  transparent  important      -webkit-box-shadow  none  important              box-shadow  none  important        a    a visited       text-decoration  underline        a href  after       content       attr href             abbr title  after       content       attr title             a href       after    a href   javascript    after       content            pre    blockquote       border  1px solid  999       page-break-inside  avoid        thead       display  table-header-group        tr    img       page-break-inside  avoid        img       max-width  100   important        p    h2    h3       orphans  3      widows  3        h2    h3       page-break-after  avoid        select       background   fff  important         navbar       display  none         btn  gt   caret     dropup  gt   btn  gt   caret       border-top-color   000  important         label       border  1px solid  000         table       border-collapse  collapse  important         table td     table th       background-color   fff  important         table-bordered th     table-bordered td       border  1px solid  ddd  important

User · Answer

2 things FYI -   For now  they ve added a few toggle classes  See what s available in the latest stable release - print toggles in responsive-utilities less New and improved solution coming in Bootstrap 3 0 - they re adding a separate print less file  See separate print less

[printing] How to create a printable Twitter-Bootstrap page

Examples related to printing

Examples related to twitter-bootstrap