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. Does anyone know why?

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
     <span class="sr-only">60% Complete</span>
   </div>
</div>

[EDIT] I have tried it like this but with no success New try

My example

score 8 · Answer 1 · answered Sep 14 '17 at 10:00

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.

Brilliant! Really helpful. Works like a charm. – Rbbn Jan 13 '18 at 14:39 — Rbbn, Jan 13 '18 at 14:39

score 0 · Answer 2 · answered May 31 '17 at 12:09

0

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

answered May 31 '17 at 12:09

Janserino

21
5

hmm, it does not work for any reason, I dont know why. – quma May 31 '17 at 12:36

Shady Alset · Answer 3 · 2017-05-31T14:44:49.230

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

score 0 · Answer 4 · answered Jan 13 '18 at 14:46

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

score 0 · Answer 5 · answered Jan 19 '22 at 08:29

For Google Chrome,

.progress {
  background-image: none;
  -webkit-print-color-adjust: exact;
  box-shadow: inset 0 0;
  -webkit-box-shadow: inset 0 0;

  .bar {
    background-image: none;
    -webkit-print-color-adjust: exact;
    box-shadow: inset 0 0;
    -webkit-box-shadow: inset 0 0;
  }
}

Source: Reference Site

Bootstrap - progress-bar is not shown in print preview

5 Answers5

Linked