CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcentering
mllamazares
mllamazares

Reputation: 8166

How to center align bootstrap progressbar?

I'm trying to center the text inside a progressbar using twitter-bootstrap framework v3.0.0.

I've tried this solution, but I'm afraid not working on the new version of the framework.

So I tried this:

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

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

Here is the fiddle: http://jsfiddle.net/HuFw4/

As you can see it centers the text in the filled part or in the empty part, but not respect all the content.

Do you have any idea, or advice advice to do it?

Upvotes: 0

Views: 12800

Answers (2)

AlvaroAV
AlvaroAV

Reputation: 10553

Try this:

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

The text should be centered by style="text-align:center"

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need to apply position: absolute; for your span element

try this demo

Upvotes: 5

Related Questions