estoy creando un tipo time line con algunas estaciones, al inicio tenia problemas para posicionar pero en este foro me ayudaron con el asunto, ahora necesito poder poner un titulo encima del boton pero cuando es muy grande la palabra se desplaza demaciado y cambia el sentido css
.d-flex.justify-content-between>.btn {
width: 2rem;
height: 2rem;
z-index: 1030;
}
.progress {
top: 1rem;
height: 1px!important;
/* Este !important no es necesario si en tu CSS tienes prioridad sobre Bootstrap, evita usarlo */
}
css
<div class="position-relative m-4">
<div class="d-flex justify-content-between">
<h5>Creacion</h5>
<h5>Pendiente</h5>
<h5>Agendamiento</h5>
<h5>Recepcion</h5>
<h5>Ceiba</h5>
<h5>Bascula</h5>
<h5>RX</h5>
<h5>Patio</h5>
</div>
</div>
<div class="position-relative m-4">
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-sm btn-primary rounded-pill">1</button>
<button type="button" class="btn btn-sm btn-primary rounded-pill">2</button>
<button type="button" class="btn btn-sm btn-secondary rounded-pill">3</button>
<button type="button" class="btn btn-sm btn-primary rounded-pill">4</button>
<button type="button" class="btn btn-sm btn-primary rounded-pill">5</button>
<button type="button" class="btn btn-sm btn-secondary rounded-pill">6</button>
<button type="button" class="btn btn-sm btn-secondary rounded-pill">7</button>
<button type="button" class="btn btn-sm btn-secondary rounded-pill">8</button>
</div>
<div class="d-flex justify-content-between">
<h5>Creacion</h5>
<h5>Pendiente</h5>
<h5>Agen</h5>
<h5>Recepcion</h5>
<h5>Ceiba</h5>
<h5>Bascula</h5>
<h5>RX</h5>
<h5>Patio</h5>
</div>
</div>
es un ejemplo de lo que tengo, quisiera lograr que cada palabra se posicione exactamente arriba del boton para que no pierda sentido el timeline