Is there any possibility to change the color of a progress bar to any value specified in hex?
The colors of variants (e.g. 'success', 'danger') are not fulfilling our specs so I need to specify my own color for the progress like this: #01A688.
I already tried to manage via css but without success.
Thanks for your help in advance.
All you need to do is provide a more specific rule targeting the background color of the progress bar.
body{padding: 4rem;}
.progress .progress-bar{background: #01A688;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>If you are using bootstrap-vue, I think you can also do:
<b-progress class="">
<b-progress-bar :style="{ 'background-color': '#01A688' }" :value="25"></b-progress-bar>
</b-progress>
I put the .progress-bar styling in global CSS (not the scoped one) and it worked. More specifically, I put the following in _style.css:
.progress-bar {
background-color: yellow;
}