Bootstrap 3 - Print / PDF

Question

I need to print my CV but the old trick

<link href="css/bootstrap.min.css" rel="stylesheet" media="print">

isn't working anymore since Bootstrap 3 is mobile-first (start from small device and then add media queries for bigger screen) so when i print my browser is keeping the mobile css.

Correct:

Wrong:

How can I fix this? I cannot re-invent bootstrap 3 of course and i can't use bootstrap 2 since syntax is changed.

I've done a nice template for Curriculum Vitae and I'd like to keep it also on pdf/print format.

Thanks

Solution 1

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

Solution 2

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;
  }
}

Solution 3

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 ;)

Comments

[mtt]

I was looking at the problem in the wrong direction (html to pdf converter, force chrome to use a specific media query...) The solution was so simple and under my eyes but i couldnt see it. Thank you so much!