3

Estoy tratando de hacer un timeline con estados personalizados. Tengo este código de posiciones de bootstrap, pero al tratar de editarlo, no se deja: solo puede mostrar tres posiciones y por lo menos necesitaría seis.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

pero poder modificarlo algo más parecido a esto:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-https://es.stackoverflow.com/questions/ask#absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-20 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-40 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
  <button type="button" class="position-absolute top-0 start-60 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">4</button>
  <button type="button" class="position-absolute top-0 start-80 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">5</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">6</button>
</div>

3 respuestas 3

4

Aunque ya tienes una respuesta aceptada, te ofrezco una alternativa sin usar estilos in-line y su mala práctica.

Basta con usar las ventajas de flexbox y sus utilidades de justificado, como la clase .justify-content-between.

La ventaja es que no necesitas cálculos manuales para poder separarlos, funciona igual sean 3, 4, 7 o los botones que desees.

/*Para evitar usar estilos in-line */

.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 */
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

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

1
  • despues de muchos meses gracias a tu ayuda pude terminar mi proyecto te lo agradezco, ahora como tu mismo hiciste referencia agregue mas botones por pedido pero en este caso los titulos que les puse como referencia en una tabla no logro posicionarlos encima de los botones quedan hacia un lado, quisiera saber como puedo realizar la accion
    – Kev Cordon
    Commented el 8 feb. 2022 a las 21:53
1

Claro los start- de bootstrap son solo para valores 0 50 y 100 y eso no te vale si quieres 6 botones, o sea, seis intervalos. Así que lo mejor usar tus propios valores.
Y el ancho total te lo he puesto al 100% (progress-bar).
Y para la posición left: como son 6 botones tienes que repartir el ancho en 5 espacios 100%/5 = 20% cada espacio.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem; left:0">1</button>
  <button type="button" class="position-absolute top-0  translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem; left:20%">2</button>
  <button type="button" class="position-absolute top-0 0 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem; left:40%">3</button>
    <button type="button" class="position-absolute top-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem; left:60%">4</button>
  <button type="button" class="position-absolute top-0  translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem; left:80%">5</button>
  <button type="button" class="position-absolute top-0  translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem; left:100%">6</button>
</div>

1
  • gracias bro me solucionaste
    – Kev Cordon
    Commented el 5 jul. 2021 a las 19:03
0

El framework Bootstrap integra flebox, el cual te permite posicionar elementos de una manera practica y simple.

Para lo que tu estas buscando, utiliza justify-content-between.

Podrás ver la documentación de Flex de Boostrap Aquí .

1
  • 1
    Cierto es buena práctica evitar los style in-line, dejarlos para soluciones rápidas temporales (debug y eso), pero al final lo recomendable es usar definiciones css. Y por supuesto en este caso lo ideal es aprovechar las ventajas de los flexbox.
    – Juan
    Commented el 6 jul. 2021 a las 20:03

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.