skip to Main Content

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


  1. 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. 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