0

Tengo una fila de 3 columnas, en cada columna va una imagen. Necesito establecer un tamaño a la columna y que sea responsive, es decir, que la imagen y los gutters sean siempre proporcionales. Estoy usando bootstrap.

Este es el código que tengo:

     <div class="container-fluid">
      <div class="row gx-2">
          <div class="col-4">
            <img src="assets/img/1.jpg">
          </div>
        <div class="col-4">
            <img src="assets/img/2.jpg">
        </div>
        <div class="col-4">
            <img src="assets/img/3.jpg">
        </div>
      </div>
    </div>

1 respuesta 1

0

Bootstrap provee un sistema de grillas responsiva dependiendo el tamaño de la pantalla del dispositivo, por ejemplo col-sm-2 para pantallas pequeñas, col-md-2 para dispositivos con pantalla mediana y col-lg-2 para dispositivos con pantallas grandes, teniendo esto en cuenta puedes usar las 3 para que tengan un comportamiento distinto dependiendo la pantalla de esta forma:

<div class="col-sm-1 col-md-2 col-lg-3"></div>

En el ejemplo de arriba, cuando use un dispositivo con pantalla grande la division ocupara una 3 columnas, con mediano ocupara dos columnas y con pequeño ocuapara una columna (de las 12 columnas con las que trabaja cada row de bootstrap), sm= small, md= medium, lg=large.

Te dejo mas información acerca de las grid de bootstrap en el siguiente enlace:Documentacion grid bootstrap

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.