CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-2
Viraj Dhamal
Viraj Dhamal

Reputation: 5325

Color issue for Bootstrap progress bar

I am using Bootstrap CSS (Bootstrap v2.3.1). I am trying to display multiple progress bar on the page. For that i have written code as given below-

<tbody>
  <tr id="10">
    <td>
      <div class="progress progress-striped active span2" id="11">
        <span style="color: rgb(68, 68, 68);">50%</span>
        <div class="bar" style="width: 50%;" id="111"></div>
      </div>                    
    </td>
  </tr>         
  <tr>
    <td id="20">
      <div class="progress progress-striped active span2" id="12">
        <span style="color: rgb(68, 68, 68);">100%</span>
        <div class="bar" style="width: 100%;" id="112"></div>
      </div>
    </td>
  </tr>
</tbody>

I have given 50 and 100 width value to these progress bar after that they show same color for both.

enter image description here

Color of first progress bar get reflected in second progress bar. Is there any mistake from my side?

Upvotes: 0

Views: 1205

Answers (1)

Getz
Getz

Reputation: 4063

If you want to have different progress bar colors, use the classes progress-info, progress-success, progress-warning, progress-danger as described in the documentation:

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Upvotes: 3

Related Questions