6

I have a page with bootstrap css layout. I am trying to print off a table. However the table looks nothing like it does on screen. I include the css file like this:

<link href='../bootstrap.min.css' rel='stylesheet' type='text/css'>

Is there a way to get the printed table to look the same as on screen or do I have to create a specific css file just for the table I want to print?

Christian R
  • 1,545
  • 3
  • 13
  • 17
  • See the accepted answer on this question.. http://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page – Carol Skelly May 12 '13 at 10:01
  • Hi I looked at this answer and I seem to include the bootstrap css file like mentioned in that answer. If i change the the link tag to add media="print" it will not work for the on screen content. – Christian R May 12 '13 at 10:23
  • 1
    Did you ever find an answer to this? – Tum May 07 '14 at 13:05

3 Answers3

7

You can apply the style sheet too both print and screen using media='screen,print'

 <link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
Christopher Hackett
  • 6,042
  • 2
  • 31
  • 41
  • Thanks for your answer. However this solution will remove the table borders. Perhaps I need to add a separate css file for @media=print which includes borders in tables? – Christian R Jul 11 '13 at 15:16
4

Replace every col-md- with col-xs- eg: replace every col-md-6 to col-xs-6.

And don't forget to use bootstrap table class.

This is the thing that worked for me to get me rid of this problem you can figure out what you have to replace.

Thank you.

Community
  • 1
  • 1
2

You should use media="all" to assure your css will applied in all cases including printing. Using media='screen,print' did not work for me.

<link ../bootstrap.min.css' rel='stylesheet' media='all'>
Arivan Bastos
  • 1,876
  • 1
  • 20
  • 28
  • 3
    While this code may answer the question, providing additional context regarding _why_ and/or _how_ it answers the question would significantly improve its long-term value. Please [edit] your answer to add some explanation. – Toby Speight Mar 31 '16 at 02:11