Twitter Bootstrap Question posted in

change color of Twitter bootstrap progress bar

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;
}
Tags:

2

Answers


  1. 0

    You should set the height of the .bar element to 100%, otherwise it’s height will be 0 (because it doesn’t have any content).

    .bar {
  background-color: green;
  height: 100%;
} 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>
    Login or Signup to reply.
  2. 0

    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

    <div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

    CSS

    .progress-bar {
  background-color: green;
}

    Please refer to this reference:
    http://getbootstrap.com/components/#progress

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search