Twitter Bootstrap: Center Text on Progress Bar

Question

I've been using Twitter's bootstrap and I would like the text on the progress bar to be centered on the on bar regardless of value.

The below link is what I have now. I would like all text to be aligned with the bottom most bar.

Screenshot:

progress bar

I've tried my best with pure CSS and I'm trying to avoid using JS if possible but I'm willing to accept it if it's the cleanest way to do it.

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>

Thomas Maurstad Larsson · Accepted Answer · 2021-12-14T17:04:32.487

196

Bootstrap 5: (Same as v4x)

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

Bootstrap 4 with utility classes: (Thanks to MaPePeR for the addition)

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

Bootstrap 3:

Bootstrap now supports text within a span element in the Progress bar. HTML as provided in Bootstrap's example. (Notice the class sr-onlyis removed)

HTML:

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60% Complete</span>
    </div>
</div>

... It does however only center the text according to the bar itself, so we need a little bit of custom CSS.

Paste this in another stylesheet/below where you load bootstrap's css:

CSS:

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
 }

JsBin file: http://jsbin.com/IBOwEPog/1/edit

Bootstrap 2:

Paste this in another stylesheet/below where you load Bootstrap's CSS:

/**
 * Progress bars with centered text
 */
.progress {
    position: relative;
}

.progress .bar {
    z-index: 1;
    position: absolute;
}

.progress span {
    position: absolute;
    top: 0;
    z-index: 2;
    color: black; /* Change according to needs */
    text-align: center;
    width: 100%;
}

Then add text to a progress bar by adding a span element outside .bar:

<div class="progress">
    <div class="bar" style="width: 50%"></div>
    <span>Add your text here</span>
</div>

JsBin: http://jsbin.com/apufux/2/edit

edited Dec 14 '21 at 17:04

answered Jun 26 '13 at 17:32

Thomas Maurstad Larsson

2,217
2
21
19

1

Thanks for the details. Small correction. Even for bootstrap 3 you should have ".progress { position: relative; }". Without this if your progress bar is in a div it won't respect the width of the div. (1) [without progress position relative jsbin](http://jsbin.com/umIkAge/2/edit) (2) [with progress position relative jsbin](http://jsbin.com/ifInIZic/1/edit) – Amir Dec 14 '13 at 09:14
1

Thanks, Amir. I'll add that to the explanation. – Thomas Maurstad Larsson Dec 15 '13 at 15:06
1

Example for bootstrap 2 only worked when i put the span before the div[class=bar]. The span was otherwise pushed to the right according to the percentage filled. – user1226868 Jun 21 '14 at 17:01
And solution for text color http://stackoverflow.com/questions/8820200/is-it-possible-to-change-text-color-based-on-background-color-using-css – Oleg Jul 28 '15 at 11:49
I think there's a "left: 0" missing in the ".progress span" selector. Also remove the "//" comment as it's not CSS compliant. – Agustí Sánchez May 18 '17 at 12:42
This is an oldie, but with Bootstrap 2, for span instead of setting the width to 100% I set z-index to 2, left to 0, and right to 0. – Barn on a Hill Jan 22 '18 at 23:14
@Driice Both `width: 100%` or `left: 0; right: 0;` should work. Your solution works due to `position: absolute;`, but I find the 100% width to be clearer. – Thomas Maurstad Larsson Jan 30 '18 at 10:21
2

I've just tried this with bootstrap 4.5 and I find I need to ad mt-2 to class attribute, otherwise the text isn't centered. – D. Foley Jul 05 '20 at 09:38

score 3 · Answer 2 · answered Oct 31 '13 at 02:13

Bootstrap 3 answer, as shown in bootstrap example

<div class="progress text-center">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60% Complete</span>
  </div>
    <span>40% Left</span>
</div>

Twitter Bootstrap: Center Text on Progress Bar

2 Answers2

Linked