CODEWITHSUNDEEP
csstwitter-bootstrap
d4rty
d4rty

Reputation: 4188

How to increase the font size of a Bootstrap progressbar and center the text?

How can I easily increase the font size of the text inside a progressbar? And vertically center the text?

<div class="progressBarModal">
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width:100%">
      this should be huge
    </div>
  </div>
</div>

Example on Bootply

Upvotes: 2

Views: 4385

Answers (3)

Vishnu Sharma
Vishnu Sharma

Reputation: 642

<div class="progressBarModal">
  <div class="progress" style="height:30px">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width:100%;    font-size: xx-large;">
      this shoul be huge
    </div>
  </div>
</div>

Check this bootply.

Upvotes: 0

overlord1234
overlord1234

Reputation: 2536

Added a new class which overrides the default font-size in bootstrap

http://www.bootply.com/BmGzxifuk9

Upvotes: 2

Salah Nour ElDin
Salah Nour ElDin

Reputation: 508

use the following HTML

<div class="progressBarModal">
  <div class="progress" style="height:30px">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="100"
    aria-valuemax="100" style="width:100%;    font-size: xx-large;">
      this shoul be huge
    </div>
  </div>
</div>

Upvotes: 1

Related Questions