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

It's obvious to most, but let's add to the people reading that you should:
1: Create a stylesheet with the code from @xixe above and save it as print.css.
2: Insert this in your HTML page
<link rel="stylesheet" type="text/css" media="print" href="print.css">
3: Now print.

Further: For a full CSS that helps printing bootstrap 3 stuff, you can get a good CSS on this page https://daneveland.com/content/printing-bootstrap

Answer 2

You have to set @media print in CSS. I think the answer is given here: Bootstrap 3 - printing colors on progress bars?

Answer 3

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

Answer 4

This is because the browser doesn't print backgrounds (with default settings), but it prints borders and we can use it! I just added this in CSS for @media print (my LESS-CSS code):

@media print {
.progress {
    position: relative;
    &:before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        border-bottom: @line-height-computed solid @gray-lighter;
    }
    &-bar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-bottom: @line-height-computed solid @brand-primary;
        &-success {
            border-bottom-color: @brand-success;
        }
        &-info {
            border-bottom-color: @brand-info;
        }
        &-warning {
            border-bottom-color: @brand-warning;
        }
        &-danger {
            border-bottom-color: @brand-danger;
        }
    }
}
}

Compiled CSS (with my variables):

@media print {
.progress {
    position: relative;
}
.progress:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    border-bottom: 2rem solid #eeeeee;
}
.progress-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-bottom: 2rem solid #337ab7;
}
.progress-bar-success {
    border-bottom-color: #67c600;
}
.progress-bar-info {
    border-bottom-color: #5bc0de;
}
.progress-bar-warning {
    border-bottom-color: #f0a839;
}
.progress-bar-danger {
    border-bottom-color: #ee2f31;
}
}

Works like a charm in Bootstrap 3.