Twitter Bootstrap: center of text in progress bar

Question

I use Twitter upload, and I would like the text on the progress bar to focus on the inclusion panel, regardless of the value.

Below is what I have now. I would like all the text to be aligned with the bottom panel.

Screenshot:

I tried my best in pure CSS, and I try to avoid using JS if possible, but I am ready to accept it if this is the cleanest way to do this.

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

Answer 1

Bootstrap 4 (tested with 4.0.0-beta.2 - there is no reason to believe that this will change):

Bootstrap 4 uses flex to position the progress bar. We move the span element to the .progress element to get around this.

Thanks Michael_B for a simple solution. (Please make changes if you know how to make it work without moving the span element)

HTML:

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

CSS:

 /** * Progress bars with centered text */ .progress span { position: absolute; display: flex; width: 100%; justify-content: center; align-items: center; } 

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

---

Boot file 3:

Boostrap now supports text inside the span element in the Progress panel. HTML, as shown in the Bootstrap example. (Note that the sr-only class has been 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> 

... However, it only centers the text on the panel itself, so we need some custom CSS.

Paste this into another stylesheet / below, where you load bootstrap 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 into another stylesheet / below, where you load bootstrap 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; // You might need to change it text-align: center; width: 100%; } 

Then add the text to the progress bar by adding the span element outside the .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

Answer 2

To make it work correctly, no matter how long your text looks here

http://jsfiddle.net/b5tbG/

You need to extract text from div

Answer 3

Bootstrap 3 answer as shown in boot 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>