Bootstrap - progress-bar is not shown in print preview

Question

I have made a simple example in JSFiddle, I will print out pages where Bootstrap progress bars are at page but if the print button is pressed the progress bar is not there.

Answer 1

Separate your print css from your screen css.

This is done via the @media print and @media screen

in your case you can add this @media print CSS Rules, like this:

@media print {
   /* All your print styles go here */
   .progress{
     background-color: #f5f5f5 !important;
     border-radius: 4px !important;
     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
   }
   .progress-bar{
     background-color: #428bca !important;
     box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15) !important;
   }
}

@media print: Intended for paged material and for documents viewed on screen in print preview mode.

See Updated Fiddle