change bootstrap progress bar background (not the bar, but the bars Background)

Question

Currently I am using a bootstrap progress bar

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

the default color of the bar is blue, I have managed to change this.

However, the default background of the not filled in part is white with grey radients, how can i change this to my own colour?

Answer 1

You just need to overwrite the values on .progress with your own CSS.

.progress {
  background-color: #aaa;
  -webkit-box-shadow: none;
  box-shadow: none;
}

That will remove the shadow on the remainder of the progress bar, and change it to (in this case) a mild gray. You can pick whatever color value you'd like there.

That can go in the HTML itself (not generally preferred), or in your own CSS file (just make sure it's included after the Bootstrap CSS).

(A quick Plunkr to illustrate: http://plnkr.co/edit/WUDuq5XayN0nXEmtXY6V)

Answer 2

You just need to put background color on progress to surround the bar:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress bg-warning">
 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
 </div>
</div>