2

Bootstrap v5.1 - Layout: Containers

Hola, este es un tutorial complementario a Clases del Curso de Bootstrap 4 en donde abordare con más detalle sobre los tipos de containers que hay en Bootstrap 5.

Para comenzar, es importante que sepas que el orden de crear un layout en bootstrap es el siguiente:

  1. Crear un contenedor
  2. Crear una fila
  3. Crear las columnas

Es util que te enteres primero de los Breakpoints con los que cuenta Bootstrap, por defecto son 6 y sirven para personalizar el comportamiento del layout dependiendo del tamaño de nuestro viewport.

<ins>La grid del framework se basa en una división de 12 columnas iguales</ins>

<h1>Container</h1>

El framework cuenta con 3 formas de crear un contenedor y son las siguientes:

  • .container

  • .container-tamaño

  • .container-fluid

.container

Esta clase hace que el contenido se centre de forma horizontal.

.container-tamaño

Al igual que la clase anterior, también centra el contenido del elemento, pero en un tamaño especial.

¿Pero cuáles son los tamaños que podemos usar?
Captura de pantalla.png

.container-fluid

Y por último, tenemos eta clase que hace que nuestro elemento contenedor tenga siempre un ancho del 100% de la pantalla.

Todas las clases son responsivas

Ahora hablemos de las filas

<h1>Filas</h1>

En Bootstrap las filas se crean con la clase .row, y definen cuantas columnas deben abarcar cada uno de los elementos que conforman la fila.
Si aún no me entiendes, no te preocupes, continúa leyendo.

.row-cols-numero

Esta es la sintaxis del tipo de clase que me dice cuántos elementos debe haber en una fila, ejemplo:

    <divclass="container">
        <divclass="row row-cols-3">
            <divclass="col">1div>
            <divclass="col">2div>
            <divclass="col">3div>
            <divclass="col">4div>
        div>
    div>

ejemplo_fila_1.png
Como puedes ver, la fila solo me permite tener las 3 primeras columnas y las que me quedan, son pasadas a una siguiente fila.

.row-cols-tamaño-numero

Al igual que la clase anterior, esta clase es para indicar cuantos elementos quiero en mi fila, pero dependiendo del tamaño en el que se encuentre mi pantalla.

No olvides que la grid del framework se basa en una división de 12 columnas iguales.

Y por último, tenemos las columnas

<h1>Columnas</h1>

La clase básica para crear una columna es .col

.col

Esta clase divide las 12 columnas en el número de columnas que hay dentro de una fila (.row).
Se que esto puedo sonar confuso, pero aqui van ejemplos:
Ejemplo 1:

<divclass="container">
        <divclass="row">
            <divclass="col">1div>
            <divclass="col">2div>
            <divclass="col">3div>
            <divclass="col">4div>
        div>
    div>

Aquí hicimos que las 12 columnas que vienen en la fila se dividan entre 4 y por ende cada elemento que contiene la clase .col tiene un ancho de 12/4, o sea, cada elemento con la clase .col tiene un ancho del 25%
ejemplo_columna_1.png

Ejemplo 2:
para este ejemplo usaremos 8 elementos

    <divclass="container">
        <divclass="row">
            <divclass="col">1div>
            <divclass="col">2div>
            <divclass="col">3div>
            <divclass="col">4div>
            <divclass="col">5div>
            <divclass="col">6div>
            <divclass="col">7div>
            <divclass="col">8div>
        div>
    div>

y su forma gráfica es:
ejemplo_columna_2.png

.col-auto

Esta clase hace que el ancho de la columna sea igual al de su contenido.
Ejemplo:

    <divclass="container">
        <divclass="row">
            <divclass="col-auto">Esta es la primer columnadiv>
            <divclass="col-auto">Esta es la otradiv>
        div>
    div>

ejemplo_columna_3.png

.col-numero

Esta clase sirve para columnas con un tamaño en especial. El ancho de columna es igual al número que le pasemos.
Ejemplo:

    <divclass="container">
        <divclass="row">
            <divclass="col-8">Esta ocupa 8 columnasdiv>
            <divclass="col-4">Esta ocupa 4 columnasdiv>
        div>
    div>

ejemplo_columna_4.png

.col-tamaño-numero

Esta clase funciona igual que la clase .col-numero, pero su diferencia está en que el ancho de columnas se da cuando estemos en un tamaño de pantalla especificado.

Para saber más, no olviden que la mejor fuente siempre es la documentación oficial y la encuentran aquí

Escribe tu comentario
+ 2