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