Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger?
I attempted adding the following code snippet to my bootstrap-theme.css file:
.progress-bar-custom {
background-image: -webkit-linear-gradient(top, #7fff7f 0%, #449d44 100%);
background-image: -o-linear-gradient(top, #7fff7f 0%, #449d44 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#7fff7f), to(#449d44));
background-image: linear-gradient(to bottom, #7fff7f 0%, #449d44 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7fff7f', endColorstr='#ff449d44', GradientType=0);
background-repeat: repeat-x;
}
In my HTML markup, I utilized the newly defined class as follows:
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:10%">
40% Complete (success)
</div>
</div>
However, despite implementing these changes, the customized color for the progress bar does not appear to be working as expected. Are there any additional steps needed to make this modification take effect?