CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ali
Ali

Reputation: 267059

How to center text in bootstrap 3 progress bar?

I'm trying to display a progress bar, using Bootstrap 3, with the following code:

   <div class="progress">
        <div class="progress-bar" style="width: 60%;">
        </div>
        <span>60%</span>
    </div>

Screenshot of output:

screenshot

However, this causes the text '60%' to be displayed towards the right, rather than in the center of the progress bar. How can I center this text, so it appears in the center?

Upvotes: 8

Views: 20713

Answers (5)

kinsley kajiva
kinsley kajiva

Reputation: 1860

try this out i used the <center> </center> tag i am not sure about backward compatibility but i have tested in chrome and Mozilla Firefox and there are current.

sample code (doesn't need any CSS):

<div class="progress progress-striped active" style="margin:0 10%;display:none;" id="uploadProgressbar">
        <center><b><span class="progress-value" id="uploadProgressValue" style="color:red;">00%</span> </b></center>
             <div class="progress-bar progress-bar-primary" role="progressbar" id="uploadProgress" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">

             </div>
</div>

Upvotes: 0

bozdoz
bozdoz

Reputation: 12860

I would put a class on the span tag, and put the tag before the progress-bar class. Then set the span to position:absolute and give progress text-align:center:

HTML:

<div class="progress">
    <span class="progress-value">60%</span>
    <div class="progress-bar"></div>
</div>

CSS:

.progress {
    text-align:center;
}
.progress-value {
    position:absolute;
    right:0;
    left:0;
}

See demo: http://jsfiddle.net/bozdoz/fSLdG/2/

Upvotes: 21

Abhay Desai
Abhay Desai

Reputation: 125

Twitter's bootstrap .span classes are floated to the left. Try adding float:none to the span it might work!

.progress span{
   margin: 0px auto;
   float:none;
}

UPDATE: This works for sure: HTML

 <div class="progress">
  <div class="bar" style="width: 60%;"></div>
  <span>60%</span>
 </div>

CSS:

 .progress {
    position: relative;
 }

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

 .progress span {
    position: absolute;
    top: 0;
    z-index: 2;
    text-align: center;
    width: 100%;
    color: black;
 }

Upvotes: 1

Varinder
Varinder

Reputation: 2664

Adding to @bozdoz answer:

Absolutely positioning the progress percentage indicator will do the trick:

HTML

<div class="progress">
    <div class="progress-bar" style="width: 60%;">
    </div>
    <span>60%</span>
</div>

CSS

.progress {
    position:relative;
}
.progress span {
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    z-index:2;
    color:white;
}

Fiddle: http://jsfiddle.net/Varinder/ejgp5/

Upvotes: 9

Moorthy GK
Moorthy GK

Reputation: 1301

.progress{ border: 5px solid;}
.progress-bar{background: #369;line-height: 50px;display: inline-block;}
.progress span{display: block; margin: 0px auto; width: 40px; margin-top: -50px; line-height: 50px; color: #fff;}

Upvotes: 0

Related Questions