hola queria saber como puedo hacer para mostrar 12 imagenes en boostrat para ispositivos grandes que se vean las filas en columnas de 3, para dispositivos medianos que se vean en columnas de 2 y para dispositivos pequeños que se vea en columna de 1
empiezo con un col.md de 3x3 y despues no se como hacer, soy muy tonta :/
o sea puedo hacer esto??
body
div.container
section.row
div.col-md-4 col-sm-6 col-6
div
div.col-md-4 col-sm-6 col-6
div
<!-- 10 mas de estos div-col -->
section
div
body
:huh:
PD: saquen las calabazas porfa
Saludos,
- BootStrap utiliza un Grid de 12 columnas y tiene hasta 5 BreakPoints:
Extra small .col- <576px
Small .col-sm- ≥576px
Medium .col-md- ≥768px
Large .col-lg- ≥992px
Extra large .col-xl- ≥1200px
- Dependiendo como consideres dispositivos grandes, medianos y pequeños debes utilizar el breakpoint adecuado, en mi caso consideraré grande a .col-lg-, mediano a .col-md- y pequeño a .col-sm
- Como el Grid es de 12 columnas y se quieren 3 para Large entonces se divide 12/3 dando 4 .col-lg-4, luego se requieren 2 columnas para Medium: 12/2 = 6 .col-md-6, y una sola columna para Small: 12/1 = 12 .col-sm-12
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
<div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
- Ejemplo en vivo: https://jsbin.com/jicubohuro/edit?html,output
- Documentación Bootstrap Grid: https://getbootstrap.com/docs/4.0/layout/grid/