Bootstrap 3 - Print / PDF

Answer :

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

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