Bootstrap 3 - Print / PDF

Question

I need to print my CV but the old trick

isn\'t working anymore s

Answer 1

Adding a print media query worked for me. This is what I finally stumbled onto.

@media print {
  @page {
    size: 330mm 427mm;
    margin: 14mm;
  }
  .container {
    width: 1170px;
  }
}

Answer 2

In my project I issued the same problem. Since I've got a app.less file in which I import the bootstrap.less source, I did the following:

@import "my_path/bootstrap.less";
@media print{
   .make-grid(sm);
}

Which is actually what it's done in Bootstrap's grid.less file

Maybe it's not the cleaner solution, but it's 3-code-lines away ;)

Answer 3

I'm most case i will expect the print in the non horizontal version maybe? In your case you could try to apply the grid rules on the print media query.

In the case you use the small grid (col-sm-*) default, b.e.

    <div class="container">

   <div class="row">
       <div class="col-sm-6">Left</div>
       <div class="col-sm-6">Right</div>
   </div>   
    </div> <!-- /container -->

In your grid.less replace @media (min-width: @screen-tablet) { with @media (min-width: @screen-tablet), print { (add print, see: CSS media queries: max-width OR max-height) Recompile bootstrap and your pdf will have left / right just like screen now.

Without Less you could try to add specific css rules for your case like:

@media print 
{
    body {width:1200px;}
    div[class|=col-]{float:left;}
    .col-sm-6{width:50%}
}

Note print.less contains specific rules for print media. This is used to hide the navbar by example. Also the utilities classes: http://getbootstrap.com/css/#responsive-utilities have Print classes.

If your browser accept the @viewport (see: http://docs.webplatform.org/wiki/css/atrules/@viewport) it will be possible maybe to do: @media print {@viewport {width:1200px;} } before the bootstrap CSS loads