elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  bootstrap comportamiento columnas
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: bootstrap comportamiento columnas  (Leído 2,133 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
bootstrap comportamiento columnas
« en: 21 Abril 2020, 22:02 pm »

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


« Última modificación: 22 Abril 2020, 01:58 am por Beginner Web » En línea

7w7
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.041



Ver Perfil
Re: bootstrap comportamiento columnas
« Respuesta #1 en: 22 Abril 2020, 02:02 am »

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

Código
  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  2. <div class="container-fluid">
  3.  <div class="row">
  4.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  5.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  6.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  7.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  8.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  9.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  10.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  11.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  12.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  13.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  14.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  15.    <div class="p-0 col-lg-4 col-md-6 col-sm-12"><img class="img-fluid" src="https://picsum.photos/720"></div>
  16.  </div>
  17. </div>
  18. <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
  19. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  20. <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/


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Bootstrap
Desarrollo Web
kakashi20 5 3,118 Último mensaje 13 Junio 2014, 06:29 am
por flacc
bootstrap con treeGrid
Desarrollo Web
fdap91 1 2,264 Último mensaje 22 Agosto 2014, 17:43 pm
por robe007
[Resuelto] Inicializar bootstrap-tooltip en Bootstrap v3.0.3
Desarrollo Web
DarK_FirefoX 0 3,492 Último mensaje 6 Abril 2015, 17:28 pm
por DarK_FirefoX
programa en neatbeas generar filas y columnas , encerar filas y columnas,43
Dudas Generales
iPaul8870 3 2,410 Último mensaje 23 Agosto 2019, 03:50 am
por engel lex
bootstrap 4
Desarrollo Web
Beginner Web 2 2,435 Último mensaje 17 Abril 2020, 23:11 pm
por EdePC
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines