Bootstrap grid es una herramienta muy poderosa compuesta por Flexbox , que facilita el desarrollo de sitios web. Es totalmente receptivo y también ajusta los elementos en el contenedor de acuerdo con el ancho del dispositivo. La clase .container es necesaria para que la cuadrícula funcione correctamente envolviendo todos los elementos de la misma. La cuadrícula de arranque tiene 12 columnas presentes, aunque no es necesario hacer uso de todas las columnas, la suma no debe ir más allá de 12. También se pueden fusionar para hacer columnas más anchas según la preferencia.
Según el dispositivo o el ancho del navegador, el sistema de cuadrícula de arranque tiene las siguientes clases.
| Clases | Tamaño del dispositivo | |
|---|---|---|
| columna | Dispositivos con un ancho de navegador inferior a 576 px | Para dispositivos pequeños |
| col-sm | Dispositivos que tengan un ancho de navegador igual o mayor a 576px. | Para dispositivos pequeños |
| col-md | Dispositivos que tengan un ancho de navegador igual o mayor a 768px. | Para dispositivos medianos |
| col-lg | Dispositivos que tengan un ancho de pantalla igual o superior a 992 px. | Para dispositivos grandes |
| col-xl | Dispositivos con un ancho de pantalla igual o mayor a 1200px | Para dispositivos extragrandes |
sm, md, lg y xl indican los tamaños del dispositivo, es decir, pequeño, mediano, grande y extragrande, respectivamente.
Para 3 columnas iguales de anchos iguales, es decir, 4 en la página web:
<div class="container">
<div class="row">
<div class="col-sm-4">Col-1 width-4</div>
<div class="col-sm-4">Col-2 width-4</div>
<div class="col-sm-4">Col-3 width-4</div>
</div>
</div>
Producción:
Para 3 columnas de anchos desiguales en la página web:
<div class="container">
<div class="row">
<div class="col-sm-4">Col-1 width-4</div>
<div class="col-sm-6">Col-2 width-6</div>
<div class="col-sm-2">Col-3 width-2</div>
</div>
</div>
Producción:
Ejemplo: El siguiente ejemplo muestra la estructura de cuadrícula de Bootstrap con varios tamaños de columna.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h5>Two equal columns</h5> <div class="row"> <div class="col-sm-6" style= "background-color:rgb(173, 248, 164);"> column-1 width-6 </div> <div class="col-sm-6" style= "background-color:rgb(71, 240, 121);"> column-2 width-6 </div> </div> <h5>Two unequal columns</h5> <div class="row"> <div class="col-sm-8" style= "background-color:rgb(173, 248, 164);"> column-1 width-8 </div> <div class="col-sm-4" style= "background-color:rgb(71, 240, 121);"> column-2 width-4 </div> </div> <h5>Three equal columns</h5> <div class="row"> <div class="col-sm-4" style= "background-color:rgb(173, 248, 164);"> column-1 width-4 </div> <div class="col-sm-4" style= "background-color:rgb(71, 240, 121);"> column-2 width-4 </div> <div class="col-sm-4" style= "background-color:rgb(55, 165, 70);"> column-3 width-4 </div> </div> <h5>Three unequal columns</h5> <div class="row"> <div class="col-sm-2" style= "background-color:rgb(173, 248, 164);"> column-1 width-2 </div> <div class="col-sm-7" style= "background-color:rgb(71, 240, 121);"> column-2 width-7 </div> <div class="col-sm-3" style= "background-color:rgb(55, 165, 70);"> column-3 width-3 </div> </div> <h5>six equal columns</h5> <div class="row"> <div class="col-sm-2" style= "background-color:rgb(173, 248, 164);"> column-1 width-2 </div> <div class="col-sm-2" style= "background-color:rgb(71, 240, 121);"> column-2 width-2 </div> <div class="col-sm-2" style= "background-color:rgb(55, 165, 70);"> column-3 width-2 </div> <div class="col-sm-2" style= "background-color:rgb(173, 248, 164);"> column-4 width-2 </div> <div class="col-sm-2" style= "background-color:rgb(71, 240, 121);"> column-5 width-2 </div> <div class="col-sm-2" style= "background-color:rgb(55, 165, 70);"> column-6 width-2 </div> </div> <h5>single column</h5> <div class="row"> <div class="col-sm-12" style= "background-color:rgb(173, 248, 164);"> column-1 width-12 </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA