Printing with bootstrap css

Question

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?

Plafker

See the accepted answer on this question.. #12303319 – Richy

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. – Plafker

Did you ever find an answer to this? – Neuron

Answer 1

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

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

Benildis

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? – Plafker

Answer 2

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.

Kapoor

Answer 3

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'>

Cystoscope

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. – Novelize

Answer 4

For me all those methods don't work. Use this code:

@media print {
    .bg-primary th {
        background-color: transparent !important;
        box-shadow: 0 0 0 1000px #095075 inset !important;
    }
}

Excrete