CODEWITHSUNDEEP
csstwitter-bootstrap
Purus
Purus

Reputation: 5799

Color Issues when printing bootstrap page

This question is answered in multiple forums and in SO already.

I have fixed grid layout issues by adding col-sx- class and it works fine. The issue I am facing now is about the background colors.

As suggested by many answers and forums, I have commented the entire print media queries in bootstrap.css file.

@media print { }

But still the colors are not shown when printing. The HTML codes are provided below.

Issue 1:

<div class="alert alert-success" role="alert">Automation Tester</div>

The above code adds a color to the div class in browser. But in print, it shows only the border.

Issue 2:

<div class="progress">
     <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
      </div>
      <span class="progress-type">CSS3</span>
      <span class="progress-completed">50%</span>
</div>

For the above code, the background color is not shown.

Live HTML Document: http://purus.github.io/resume/

Please try to print preview the above page and you can see the difference in live for the "summary" and "Technical Skills" section.

Upvotes: 0

Views: 95

Answers (1)

Qwertiy
Qwertiy

Reputation: 21380

If you already removed media queries, try to check checkbox Background in additional printing options of Chrome's print preview. It is turned off be default.

Other browsers have the same functionality.

Upvotes: 1

Related Questions