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="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> <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/