CODEWITHSUNDEEP
twitter-bootstrapprinting-web-page
Christian R
Christian R

Reputation: 1563

Printing with bootstrap css

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?

Upvotes: 6

Views: 38698

Answers (4)

Rana Ankit
Rana Ankit

Reputation: 1

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;
    }
}

Upvotes: 0

Vivek Vadoliya
Vivek Vadoliya

Reputation: 81

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.

Upvotes: 6

Arivan Bastos
Arivan Bastos

Reputation: 1996

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

Upvotes: 3

Christopher Hackett
Christopher Hackett

Reputation: 6192

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

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

Upvotes: 7

Related Questions