Bootstrap de Twitter: texto central en la barra de progreso

Solución:

Bootstrap 5 Alpha: (Igual que 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 con clases de utilidad: (Gracias a MAPA para la adición)

<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 ahora admite texto dentro de un elemento de intervalo en la barra de progreso. HTML como se proporciona en el ejemplo de Bootstrap. (Fíjate en la clase sr-onlyes removido)

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>

… Sin embargo, solo centra el texto de acuerdo con la barra, por lo que necesitamos un poco de CSS personalizado.

Pegue esto en otra hoja de estilo / debajo de donde carga el CSS de bootstrap:

CSS:

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
 }

Archivo JsBin: http://jsbin.com/IBOwEPog/1/edit

---

Bootstrap 2:

Pegue esto en otra hoja de estilo / debajo de donde carga el CSS de Bootstrap:

/**
 * 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%;
}

Luego agregue texto a una barra de progreso agregando un span elemento exterior .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

Respuesta de Bootstrap 3, como se muestra en el ejemplo de bootstrap

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

---

---

Utiliza Nuestro Buscador