Printing using bootstrap css

Question

I have a page with bootstrap css layout. I am trying to print a table. However, the table does not look the same as on the screen. I include the css file as follows:

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

Is there a way to make the printed table look the same as on the screen, or do I need to create a specific css file only for the table I want to print?

Answer 1

Using media='screen,print'

You can apply the stylesheet to both print and screen.

  <link ../bootstrap.min.css' rel='stylesheet' media='screen,print'> 

Answer 2

Replace each col-md- with col-xs- for example: replace each col-md-6 with col-xs-6 .

And don't forget to use the bootstrap class.

This is what worked for me to get rid of this problem, you can understand what you need to replace.

Thanks.

Answer 3

You should use media = "all" to ensure that your css will be applied in all cases, including printing. Using the media = ' screen , printing does not work for me.

 <link ../bootstrap.min.css' rel='stylesheet' media='all'>