CODEWITHSUNDEEP
twitter-bootstrapalignmentvertical-alignment
Rubinoff
Rubinoff

Reputation: 35

How to vertically align text in progress bar bootstrap

I decided to change height of the progress bar but the text doesnt seem to align vertically inside the progress bar.

here is the jsfiddle i made.

jsfiddle

<div class="container">
    <div class="progress" style="height:40px;">

  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 27%">
   <span style="" id="spanP">60%</span>
  </div>

</div>
</div>

Upvotes: 1

Views: 1743

Answers (1)

Hamed Khatami
Hamed Khatami

Reputation: 545

Change line-height of your span.

<div class="container">
    <div class="progress" style="height:40px;">

  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 27%">
   <span style="line-height: 39px;" id="spanP">60%</span>
  </div>

</div>
</div>

Regards

Upvotes: 1

Related Questions