Bootstrap grid es una herramienta muy poderosa que facilita el desarrollo de sitios web. Está hecho con flexbox, por lo tanto, es totalmente receptivo y también ajusta los elementos en el contenedor de acuerdo con el ancho del dispositivo. El contenedor es un elemento envolvente que envuelve todos los demás elementos y contenidos de la página web. CSS requiere este elemento envolvente para que la cuadrícula funcione correctamente. La clase .container es la clase que solemos usar cuando usamos bootstrap en nuestro código, ya que también proporciona algunas opciones adicionales, como establecer la alineación en el centro y rellenar horizontalmente el contenido.
La grilla bootstrap 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.
Las clases .row y .col se pueden usar para crear y manipular las filas y columnas de la cuadrícula, respectivamente.
Según el dispositivo o el ancho del navegador, el sistema de cuadrícula de arranque tiene las siguientes cinco clases:
Para dispositivos pequeños
- col: Tiene el ancho del navegador de menos de 576px.
- col-sm: Tiene el ancho del navegador igual o mayor a 576px.
Para dispositivos medianos
- col-md: Tiene el ancho del navegador igual o mayor a 768px.
Para dispositivos grandes y extragrandes
- col-lg: Tiene un ancho de pantalla igual o mayor a 992px.
- col-xl: Tiene un ancho de pantalla igual o mayor a 1200px
Nota: aquí, sm, md, lg y xl indican los tamaños del dispositivo, es decir, pequeño, mediano, grande y extragrande.
Estructura basica:
<div class="container">
<div class="row">
<div class="col-lg">
column-1
</div>
<div class="col-lg">
Column-2
</div>
</div>
</div>
Esto creará 2 columnas alineadas al centro de igual ancho. El contenedor de clase envuelve todas las filas, columnas y contenido de la cuadrícula. La fila de clase se usa para crear una fila y la clase col-lg indica que el ancho del dispositivo es grande.
Ejemplo: Crear 3 columnas iguales de igual ancho.
HTML
<!DOCTYPE html> <html> <head> <title>Three Equal columns</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <h1 style="text-align: center; color: rgb(18, 171, 18);"> GeeksforGeeks </h1> <div class="container"> <div class="row" style="text-align: center;"> <div class="col-lg-4 col-md-4 col-12" style= "background-color:#ffbe76; padding: 5px; height: 150px;"> <h2>column-1</h2> </div> <div class="col-lg-4 col-md-4 col-12" style= "background-color:#34bcc4; padding: 5px; height: 150px;"> <h2>column-2</h2> </div> <div class="col-lg-4 col-md-4 col-12" style= "background-color:#ff7979; padding: 5px; height: 150px;"> <h2>column-3</h2> </div> </div> </div> </body> </html>
Producción:
Como puede ver en el resultado, se crean 3 columnas de anchos iguales en la página web y los anchos de columna se ajustan de acuerdo con el ancho del navegador para que responda.
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA