How can I manage classes like Twitter Bootstrap "row" and "span (X)" to work with @media print?

Question

I need to print web pages on my website and I am wondering how to make Boottrap row and spanX classes so that I can easily manage the contents of the printed page.

For instance:

<div class="row-fluid">
<div class="span12">
<strong>Some stuff</strong>
</div>
</div>

and

<div class="row-fluid">
<div class="span6 offset6">
<strong>Some stuff</strong>
</div>
</div>

look exactly the same when calling window.print() .

In the above example, <strong>Some stuff</strong> not moving forward offset6 .

I have done 2 things:

• Took all the @media print code from bootstrap.css and bootstrapresponsive.css ;

• Changed media to all :
  from <link rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css" media="screen" />
  
  before <link rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css" media="all" /> ;

With these changes, the header and footer and bootstrap (original) font appeared on the printed page, but still do not affect / from the classes.

Thanks.

Answer 1

Did you make a separate stylesheet and put it after all the other stylesheets and did

 <link rel="stylesheet" type="text/css" href="/path/css/print-stylesheet.css" media="print" /> 

Everything you enter there will override any other styles that you have in the media = "screen" style sheets. Just make sure this is the last CSS file specified in your DOM.

I forgot if you need to include @media print in your print stylesheet, I think media = "print" will take care of that