Twitter Bootstrap: Center Text on Progress Bar

Twitter Bootstrap: Center Text on Progress Bar

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

How to center text in bootstrap 3 progress bar?

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/

Bootstrap progressbar -- Get the text centered no matter the progress

You can make it possible by wrapping the progress bar title in another div as shown in below snippet:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {

  padding: 20px 0 0;

}

.progress {

  position: relative;

}

.progress-bar-title {

  position: absolute;

  text-align: center;

  line-height: 20px; /* line-height should be equal to bar height */

  overflow: hidden;

  color: #fff;

  right: 0;

  left: 0;

  top: 0;

}

<div class="progress">

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

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

</div>

<div class="progress">

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

  <div class="progress-bar-title">Progress Bar Title Goes Here</div>

</div>

How to center align bootstrap progressbar?

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

try this demo

Vertical align center text along with the progress bar

Just setting using margin-top

.progress-num {

  float: left;

  margin-right: 1em;

}

.progress {

    height: 0.5em !important;

    margin-top: 7px;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

  <table class="table">

    <tr>

      <td>

        <span class="progress-num">8/10</span>

        <div class="progress">

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

          <span class="sr-only"></span>

        </div>

      </div>

      </td>

    </tr>

  </table>

Align Progress Bar Bootstrap 4 (centered value) with button

Just Add vertical-align: middle; to the .progress-bar-size. You need to do this because your elements are inline-flex.

Demo Fiddle

Bootstrap Progress Bar text not center

Add this rule to your CSS:

.progress-bar {
    max-width: 100%;
}

Text Center on Progress Bar

You can just position the text absolutely inside the bar and then set the right to 100 minus the percentage:

// on page load...

moveProgressBar();

// on browser resize...

$(window).resize(function() {

  moveProgressBar();

});

// SIGNATURE PROGRESS

function moveProgressBar() {

  console.log("moveProgressBar");

  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);

  var getProgressWrapWidth = $('.progress-wrap').width();

  var progressTotal = getPercent * getProgressWrapWidth;

  var animationLength = 1000;

  // on page load, animate percentage bar to data percentage length

  // .stop() used to prevent animation queueing

  $('.progress-bar').stop().animate({

    left: progressTotal

  }, animationLength);

  

  $('.progress-value').stop().animate({

    right: 100 - $('.progress-wrap').data('progress-percent') + '%'

  }, animationLength);

}

.progress-size {

  width: 100%;

  height: 50px;

}

.progress-wrap {

  border: 1px solid #FFFFFF;

  background: #3498DB;

  height: 50px;

  margin: 0px 0;

  overflow: hidden;

  position: relative;

}

.progress-bar {

  background: #ddd;

  left: 0;

  position: absolute;

  top: 0;

}

.progress-value {

  line-height: 50px;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 100%;

  text-align:center;

  margin:0;

  overflow:hidden;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress-wrap" data-progress-percent="25">

  <div class="progress-bar progress-size"></div>

  <p class="progress-value alt text-center">25%</p>

</div>

---

Related Topics