Paramone Paramone - 1 year ago 180
CSS Question

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

As you can see on the screenshot below, the text is centered in the middle of the progressbars' current progress.
enter image description here
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:
enter image description here

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 Source

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

@import url('');

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 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download