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

Question

As you can see on the screenshot below, the text is centered in the middle of the progressbars' current progress. Is there a way to make this text 'overlap' the progress, seperating it, and being centered of the entire width, and the progress would show behind?

This would then be something like:

The code used for 4 progress bars are found here. (regular docs)

I do not have my own code posted, because I don't have any code to recreate what I want.

Answer 1

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>