1

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

2
  • 1
    Creo que el botón y el texto deberían compartir contenedor, revisa este ejemplo o busca otras opciones aquí.
    – Triby
    Commented el 9 feb. 2022 a las 16:42
  • Se me ocurren varias formas de lograr lo que necesitas, las soluciones que te podríamos brindar parten del punto visual y subjetivo. Podrías por ejemplo intercambiar los títulos, pares arriba impares abajo, de esta forma no se tocan. Podrías aparecer los títulos sólo al hacer hover. Commented el 9 feb. 2022 a las 16:51

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.