I am looking at Twitter bootstrap. I am trying to change the color of the progress bar, but cannot actually even show the bar.
My code looks like this. I have no idea what is wrong and have tried everything. Perhaps it is the version of bootstrap that I am using
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
HTML
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
CSS
.bar {
background-color: green;
}
2
Answers
You should set the
height
of the.bar
element to100%
, otherwise it’s height will be 0 (because it doesn’t have any content).It appears you’re not using the right CSS class for the bar itself. Please try using the class “progress-bar” instead of “bar”. For example:
HTML
CSS
Please refer to this reference:
http://getbootstrap.com/components/#progress