How can I change color of bootstrap progress bar with custom color
Simplest thing you can do is...
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:10%; background-color:red !important;">
</div>
</div>
mention style="width:10%; background-color:red !important;" in progress-bar div
put any color instead of red...
Using Bootstrap 3.2.0, you can do something like the following:
$(function() {
$("#one").addClass("progress-bar-purple");
$("#two").addClass("progress-bar-orange");
});.progress-bar-purple {
background-color: purple !important;
}
.progress-bar-orange {
background-color: orange !important;
}<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<div class="progress">
<div id="one" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div class="progress">
<div id="two" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
80%
</div>
</div>