Printing page with bootstrap 3

Question

I've been looking through a lot of answers here on stackoverflow that semi-cover what I'm wondering about, but haven't found anything that worked for me.

I understand that the printing page is about 550 px for A4 and therefor bootstrap will use the styles and layout usually used for mobile devices.

When I use Ctrl+P for my web page, the printable page looks just like the mobile version of my page. But how do I make it look like the desktop version? (media > 1024 px) Is there a way to do this?

I know I can change the css specifically for print. But how to solve this thing with the bootstrap 3 grid system? The width on my divs gets based on what I have added for col-xs, but I want print to use the layout (width) for col-md

Edit: After I have been struggeling with this for some more hours I realize that it might be more complex than I first expected. Just changing the width doesn't solve it for me. Many of my divs has the syntax of

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

or

<div class="col-md-4 col-sm-6 col-xs-12"></div>

The page looks good in XS for small devices, but printing in XS makes many elements look gigantic. So the question remains. Is there a way to make the printing page look the same as the layout for medium or large devices? Or do I have to make the printing css without using bootstrap grid system and add static widths in pt for all elements to accomplish this?

Thanks in advance

Answer 1

I ended up solving the problem using an own print.css file without all the responsive bootstrap stuff included. Only included some of the necessary bootstrap things with show and hide.

Answer 2

I had the similar problem. I ended up replacing all col-md-* with col-xs-* and it worked like a charm. Here is the exmaple code

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-md-9 text-center main-title col-md-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>

converted to

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-xs-9 text-center main-title col-xs-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>

Answer 3

Add This css style in your print.css file

    @page {
    size: A4;
    margin: 40px;
}


    @media print {
    html,
    body {
        width: 210mm;
        height: 297mm;
    }
    @-moz-document url-prefix() {}
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-smdm-12 {
        float: left;
    }
    .col-sm-12,
    .col-md-12 {
        width: 100%;
    }
    .col-sm-11,
    .col-md-11 {
        width: 91.66666667%;
    }
    .col-sm-10,
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-sm-9,
    .col-md-9 {
        width: 75%;
    }
    .col-sm-8,
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-sm-7,
    .col-md-7 {
        width: 58.33333333%;
    }
    .col-sm-6,
    .col-md-6 {
        width: 50%;
    }
    .col-sm-5,
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-sm-4,
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-sm-3,
    .col-md-3 {
        width: 25%;
    }
    .col-sm-2,
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-sm-1,
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-sm-pull-12 {
        right: 100%;
    }
    .col-sm-pull-11 {
        right: 91.66666667%;
    }
    .col-sm-pull-10 {
        right: 83.33333333%;
    }
    .col-sm-pull-9 {
        right: 75%;
    }
    .col-sm-pull-8 {
        right: 66.66666667%;
    }
    .col-sm-pull-7 {
        right: 58.33333333%;
    }
    .col-sm-pull-6 {
        right: 50%;
    }
    .col-sm-pull-5 {
        right: 41.66666667%;
    }
    .col-sm-pull-4 {
        right: 33.33333333%;
    }
    .col-sm-pull-3 {
        right: 25%;
    }
    .col-sm-pull-2 {
        right: 16.66666667%;
    }
    .col-sm-pull-1 {
        right: 8.33333333%;
    }
    .col-sm-pull-0 {
        right: auto;
    }
    .col-sm-push-12 {
        left: 100%;
    }
    .col-sm-push-11 {
        left: 91.66666667%;
    }
    .col-sm-push-10 {
        left: 83.33333333%;
    }
    .col-sm-push-9 {
        left: 75%;
    }
    .col-sm-push-8 {
        left: 66.66666667%;
    }
    .col-sm-push-7 {
        left: 58.33333333%;
    }
    .col-sm-push-6 {
        left: 50%;
    }
    .col-sm-push-5 {
        left: 41.66666667%;
    }
    .col-sm-push-4 {
        left: 33.33333333%;
    }
    .col-sm-push-3 {
        left: 25%;
    }
    .col-sm-push-2 {
        left: 16.66666667%;
    }
    .col-sm-push-1 {
        left: 8.33333333%;
    }
    .col-sm-push-0 {
        left: auto;
    }
    .col-sm-offset-12 {
        margin-left: 100%;
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-9 {
        margin-left: 75%;
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-6 {
        margin-left: 50%;
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-3 {
        margin-left: 25%;
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-0 {
        margin-left: 0%;
    }
    .visible-xs {
        display: none !important;
    }
    .hidden-xs {
        display: block !important;
    }
    table.hidden-xs {
        display: table;
    }
    tr.hidden-xs {
        display: table-row !important;
    }
    th.hidden-xs,
    td.hidden-xs {
        display: table-cell !important;
    }
    .hidden-xs.hidden-print {
        display: none !important;
    }
    .hidden-sm {
        display: none !important;
    }
    .visible-sm {
        display: block !important;
    }
    table.visible-sm {
        display: table;
    }
    tr.visible-sm {
        display: table-row !important;
    }
    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

Answer 4

For those who use bootstrap mixins to create columns like this (sass version):

@include make-sm-column(3, 0);

it won't be enough to overwrite the styles for columns classes like Christina suggests. The only simple solution I've found was to change $screen-sm in _variables.scss to 595px and recompile bootstrap.css

So, find this code in _variables.scss:

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

and change it to this:

// decrease min-width to fix print layout issue
$screen-sm:                  595px !default; 
$screen-sm-min:              $screen-sm !default;

then in your _print.scss

@page {
  size: A4;
  margin: 0;
}
@media print {

  html, body {
    width: 768px;
  }
  body {
    margin: 0 auto;
  }

  // .. your custom styles for print layout

}

Answer 5

Actually, all you need to add (to user.css) is this:

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
  }
}

While you're at it, consider using all these settings for bootstrap 3

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
    line-height: 1em;
    word-spacing:1px;
    letter-spacing:0.2px;
    font: 14px "Times New Roman", Times, serif;
    background:white;
    color:black;
    width: 100%;
    float: none;
  }

  /* avoid page-breaks inside a listingContainer*/
  .listingContainer{
    page-break-inside: avoid;
  }

  h1 {
    font: 28px "Times New Roman", Times, serif;
  }

  h2 {
    font: 24px "Times New Roman", Times, serif;
  }

  h3 {
    font: 20px "Times New Roman", Times, serif;
  }

  /* Improve colour contrast of links */
  a:link, a:visited {
    color: #781351
  }

  /* URL */
  a:link, a:visited {
    background: transparent;
    color:#333;
    text-decoration:none;
  }

  a[href]:after {
    content: "" !important;
  }

  a[href^="http://"] {
    color:#000;
  }

  #header {
    height:75px;
    font-size: 24pt;
    color:black
  }
}

Answer 6

It would be helpful to provide a JSBin. Anyway, since I had this layout in JSBin with col-sm-(asterisk), you can just change all the -sm- to -xs- in between the print media query. All percentages are the same at every breakpoint, so changing sm to xs will print that and ignore the other col-(asterisk) classes. Ahh, I read the post now, you'll need to change all the col-sm to col-md in this and then use !important, that should do it. The xs col are outside media queries, so that's why this is happening.

http://jsbin.com/AzICaQes/5

@media print {

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: left;
}
.col-sm-12 {
  width: 100%;
}
.col-sm-11 {
  width: 91.66666666666666%;
}
.col-sm-10 {
  width: 83.33333333333334%;
}
.col-sm-9 {
  width: 75%;
}
.col-sm-8 {
  width: 66.66666666666666%;
}
.col-sm-7 {
  width: 58.333333333333336%;
}
.col-sm-6 {
  width: 50%;
}
.col-sm-5 {
  width: 41.66666666666667%;
}
.col-sm-4 {
  width: 33.33333333333333%;
 }
 .col-sm-3 {
   width: 25%;
 }
 .col-sm-2 {
   width: 16.666666666666664%;
 }
 .col-sm-1 {
  width: 8.333333333333332%;
 }

  }