4

I need to print web pages in my website and I'm wondering how to make row and spanX classes of Bootstrap work so I can easily manage the content of the printed page.

For example:

<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 example above, <strong>Some stuff</strong> is not being pushed ahead by the offset6.

I've done 2 things:

  • Taken all @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" />

    to <link rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css" media="all" />;

With these changes, header, footer and the bootstrap (original) font have appeared on the printed page but still no effect from/of the classes.

Thanks.

Bagata
  • 2,120
  • 4
  • 25
  • 39

1 Answers1

0

Did you make a separate stylesheet and place it after all other stylesheets and do 

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

Anything you put in there will override any other styles you have in your media="screen" stylesheets. Just make sure it is the last CSS file called in your DOM.

I forget if you have to include @media print in your print style sheet, I think the media="print" will take care of that

james
  • 5,006
  • 8
  • 39
  • 64
  • Thank you but I don't think your answer solves my question. Read it again, please. – Bagata Aug 07 '13 at 01:21
  • What are all of the CSS files are you calling into your files? Just "bstrapmin.css" (which I assume you have customized to fit your needs?)? Also, is this a problem with the positioning of items or the font styling of items? The line where you said " the bootstrap (original) font have appeared on the printed page " is what I think is throwing me off. – james Aug 08 '13 at 16:38
  • None of my CSS files are overriding bootstrap classes. My point is if the fonts of bootstrap css are working, why do row and span aren't working? – Bagata Aug 08 '13 at 18:45
  • I see. Well I wish you luck in finding your answer! The only thing that may help is making sure your @print media query is at the very bottom of the file or move all that into a media="print" link...or try to make a completely separate **test** file with only print CSS styles (nothing else) to test out those classes behaviors with no other styles to get in the way and override. Maybe it's a Bootstrap issue if you still can't get those to look right. Good luck!! – james Aug 09 '13 at 13:03
  • Thank you for your concern. I solved my problem without using bootstrap classes. I used margin and padding to manage the content in the pages. – Bagata Aug 09 '13 at 14:10