CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbackgroundprogress-bar
user3506938
user3506938

Reputation: 593

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

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?

Upvotes: 20

Views: 20263

Answers (4)

Sepas
Sepas

Reputation: 11

you have to use contextual classes. adding a class like this would solve your issue:

class="progress-bar-success"

in order to use other colors you can change the "success" with:

  • info: light blue
  • danger: red
  • warning: orange

Upvotes: 0

Muhammad Abdullah Khan
Muhammad Abdullah Khan

Reputation: 80

You can simply do this. either inline or in separate css file.

 <div class="progress" style="height:20px; border-radius: 0; background-color: #ffaab2;">
      <div class="progress-bar" style="width:80%;height:20px; background-color: #ff5262">
      </div>
    </div>

Upvotes: 2

Andre Shen
Andre Shen

Reputation: 91

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>

Upvotes: 9

Hupfen
Hupfen

Reputation: 198

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)

Upvotes: 14

Related Questions