es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

5 columnas iguales sólo para pantallas grandes – Bootstrap 5

16 Jul, 2023 Programación

Estoy editando esta pregunta para que sea más clara.

Sé que bootstrap considera una pantalla dividida en 12 columnas y se pueden usar clases como col-md- o col-lg- para codificarlo en diferentes pantallas. Lo que quiero saber es: ¿hay alguna forma de codificar mis divisiones para que tengan 5 divisiones de ancho igual en pantallas medianas y grandes, pero en pantallas pequeñas o extra pequeñas ocupen todo el ancho, es decir, las 12 columnas?

<div class="row">
   <div class="col">
      1 de 5
   </div>
   <div class="col">
      2 de 5
   </div>
   <div class="col">
      3 de 5
   </div>
   <div class="col">
      4 de 5
   </div>
   <div class="col">
      5 de 5
   </div>
</div>

El código anterior creará 5 columnas iguales para todas las pantallas. Pero quiero que solo sea así para pantallas medianas y grandes. Para pantallas pequeñas, quiero que sea una columna de ancho completo.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes lograr esto utilizando los puntos de interrupción responsivos de Bootstrap junto con la clase col-. Utiliza la clase col-12 para pantallas sm y xs, y col-md-2 o col-lg-2 para pantallas medianas y grandes, para crear 5 columnas de ancho igual. Aquí tienes un ejemplo de código:

    <div class="row">
  <div class="col-12 col-md-2">
    1 de 5
  </div>
  <div class="col-12 col-md-2">
    2 de 5
  </div>
  <div class="col-12 col-md-2">
    3 de 5
  </div>
  <div class="col-12 col-md-2">
    4 de 5
  </div>
  <div class="col-12 col-md-2">
    5 de 5
  </div>
</div>

    En este código, col-12 hará que las columnas ocupen todo el ancho en pantallas sm y xs, mientras que col-md-2 las hará de ancho igual para pantallas medianas y grandes.

Comments are closed.