Descripción del diseño de cuadrícula en Bootstrap

En esta publicación, cubriremos varios aspectos del sistema Bootstrap Grid con varios ejemplos. Para empezar, vamos a crear un diseño de cuatro columnas iguales para dispositivos de tamaño medio en el sistema Bootstrap Grid.

Dhananjay Kumar Last Updated Feb 25, 2025 11min read

Con cada día que pasa, aparecen nuevos dispositivos con nuevos tamaños de pantalla y, como desarrolladores web, debemos crear aplicaciones web que respondan a estos diversos tamaños de pantalla. Hay varias formas de crear un diseño responsivo, sin embargo, creo que el diseño de cuadrícula de Bootstrap es el más fácil.

Diseño de 4 columnas iguales

Para crear el diseño, debe completar los siguientes pasos:

Cree un div con la clase container para el ancho fijo o container-fluid para el ancho completo de la pantalla
Cree un div con la clase row. Div con la fila de clase debe estar dentro del contenedor
Cree 4 divs para 4 columnas. Div de la columna debe ser el elemento secundario inmediato de la fila div
El contenido estará dentro de la columna div

Para crear cuatro columnas iguales seguidas, he creado cuatro divs con la clase establecida en col-md-3 como se muestra en la lista a continuación:

<div class="row">
    <div class="col-md-3">
        <button class="btn btn-success">column1</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-info">column2</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-danger">column3</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-warning">column4</button>
    </div>
</div>

El sistema Bootstrap Grid divide el ancho disponible de la pantalla en 12 columnas. Por lo tanto, para crear cuatro columnas, hemos utilizado la clase col-md-3 (para dispositivos medianos).

3 Unequal Columns Layout

Para crear tres columnas desiguales seguidas, he creado tres divs con la clase establecida en col-md-3, col-md-6 y col-md-4 como se muestra en la lista a continuación:

<div class="row">
    <div class="col-md-3">
        <h2>some text</h2>
    </div>
    <div class="col-md-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4">
        <h2>some text</h2>
    </div>
</div>

Hemos utilizado la clase .col-md-* para crear el diseño, uno con columnas iguales y otro con columnas desiguales para dispositivos medianos. Para otros dispositivos, tenemos otras clases disponibles de las que hablaremos más adelante en la publicación. Vayamos más allá para discutir el concepto teórico del sistema de cuadrícula.

Sistema de cuadrícula Bootstrap

El sistema Bootstrap 3.0 Grid fue diseñado pensando en los dispositivos móviles. Es responsivo y nos da clases para crear diseños para dispositivos extra pequeños, dispositivos pequeños, escritorios y escritorios extra grandes. En la siguiente imagen se muestran varias clases que se nos proporcionan para varios tipos de dispositivos:

Se muestran varias clases que se nos proporcionan para varios tipos de dispositivos

El sistema Bootstrap Grid divide cada tipo de pantalla en 12 columnas. El ancho de las columnas depende del tamaño de la pantalla, pero Bootstrap considera varios tamaños de pantalla y sus tamaños de columna son los siguientes:

El ancho de las columnas depende del tamaño de la pantalla, pero Bootstrap tiene en cuenta varios tamaños de pantalla y sus tamaños de columna

Estas 12 columnas se pueden escalar hacia arriba o hacia abajo en diferentes variaciones según el tamaño de la pantalla, como se muestra a continuación:

Podemos crear un diseño anterior para dispositivos de tamaño mediano utilizando la lista a continuación:

<div class="container">
    <div class="row">
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>

    </div>

    <div class="row">
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            col-md-4
        </div>
        <div class="col-md-4">
            col-md-4
        </div>
        <div class="col-md-4">
            col-md-4
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            col-md-6
        </div>
        <div class="col-md-6">
            col-md-6
        </div>
    </div>
</div>

Reglas para usar el sistema Bootstrap Grid

Para trabajar con el diseño Bootstrap Grid, debemos tener en cuenta los siguientes puntos:

Las filas deben colocarse dentro de un contenedor (para el ancho fijo) o container.fluid (para el ancho completo) para obtener el relleno y la alineación adecuados.
Las columnas deben ser elementos secundarios inmediatos de las filas.
El contenido debe colocarse dentro de las columnas.
Cada fila tiene dos columnas disponibles.
Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales, como una unidad, se ajustará a una nueva línea.

Creación de diseño para dispositivos medianos

Digamos que necesitamos crear un diseño para un dispositivo mediano con el siguiente requisito

Should have three columns
El ancho de la 1ª columna debe ser igual al ancho de 2 columnas.
El ancho de la 2ª columna debe ser igual al ancho de 6 columnas.
El ancho de la 3ª columna debe ser igual al ancho de 4 columnas.

Este diseño se puede crear como se muestra en el listado a continuación:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

Esto creará un diseño como se muestra a continuación:

El código anterior creará un diseño como se muestra

Si no desea trabajar con todo el ancho del dispositivo y desea utilizar un ancho fijo, coloque la fila div dentro de la clase de contenedor como se muestra en la lista a continuación:

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

Aquí se crearía el diseño como se muestra en la imagen a continuación, que está utilizando el ancho fijo:

Si colocamos más de 12 columnas en una sola fila, las columnas adicionales como unidad se apilarán a la siguiente línea.

Creación de diseño para dispositivos pequeños

Digamos que necesitamos crear un diseño para un dispositivo pequeño con los siguientes requisitos:

Should have three columns
El ancho de la 1ª columna debe ser igual al ancho de 2 columnas.
El ancho de la ^{2ª debe} ser igual al ancho de las 6 columnas.
El ancho de la 3ª debe ser igual al ancho de las 4 columnas.

Este diseño se puede crear para dispositivos pequeños como se muestra en el listado a continuación:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2">
            <h2>.col-sm-2</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-6">
            <h2>.col-sm-6</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-4">
            <h2>.col-sm-4</h2>
            <p>some text </p>
        </div>
    </div>
</div>

Este fragmento le dará el diseño que se muestra en la imagen a continuación. Como puede observar, el ancho de la segunda columna es tres veces el ancho de la primera columna. Además, el otro punto importante que puede notar es que las columnas no se apilan verticalmente, incluso cuando el ancho de los navegadores se reduce (simulando dispositivos pequeños).

De la misma manera, se pueden crear diseños para dispositivos grandes y extra pequeños utilizando las clases .col-mg-* y .col-xs.* respectivamente.

Creación de diseños para tabletas y equipos de escritorio

Podemos combinar la clase col-md-* y la clase col-sm-* para crear diseños para computadoras de escritorio y tabletas. Podemos crear un diseño de tres columnas desiguales como se muestra en el listado a continuación:

<div class="row">
    <div class="col-md-2 col-sm-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4">
        <h2>some text</h2>
    </div>
</div>

El diseño creado anteriormente respondería tanto a las computadoras de escritorio de tamaño de pantalla media como a las tabletas.

Creación de diseño para tabletas, equipos de escritorio y dispositivos móviles

Podemos combinar la clase col-md-*, col-xs-* y col-sm-* para crear diseños para computadoras de escritorio y tabletas: veamos cómo crear un diseño de tres columnas desiguales como se muestra en la lista a continuación:

<div class="row">
    <div class="col-md-2 col-sm-2 col-xs-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        <h2>some text</h2>
    </div>
</div>

El diseño creado anteriormente respondería tanto a computadoras de escritorio de tamaño de pantalla mediana, dispositivos móviles y tabletas.

Nesting Columns

Bootstrap también permite el anidamiento de columnas, lo que significa que podemos poner filas y columnas dentro de una columna existente. Tenga en cuenta que, incluso en el anidamiento, la suma del total de columnas no debe ser mayor que 12 en una misma fila. Para entender esto mejor, consideremos el siguiente escenario:

Hay una fila.
Hay dos columnas en la fila.
La primera columna es de la clase col-md-4.
La segunda columna es de la clase col-md-8.
Hay una columna anidada dentro de la primera columna.

Aquí, el número máximo de columnas anidadas sería 12 dentro del col-md-4. Más de 12 columnas se apilan a la siguiente línea de la primera columna. Consideremos el listado a continuación, donde hemos guardado más de 12 columnas anidadas.

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-2">
                <h2>text here</h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <h1>I am level - col-md-8 </h1>
    </div>
</div>

Aquí hemos puesto más de 12 columnas anidadas en la primera columna de la fila principal. Las columnas anidadas adicionales se apilan en la siguiente línea, como se muestra en la imagen a continuación:

Column Offset

Bootstrap nos permite mover columnas a la derecha usando la clase .col-md-offset-*. Entonces, digamos que queremos mover una columna 4 columnas hacia la derecha, entonces tendremos que usar la clase col-md-offset-4. Esto se puede hacer como se muestra en el listado a continuación:

<div class="row">
    <div class="col-md-5 col-md-offset-4">
        <h2>moved 4 columns right</h2>
    </div>
    <div class="col-md-3">
        <h2>col-md-3 </h2>
    </div>
</div>

A continuación, se muestran las columnas de desplazamiento como se muestra en la imagen siguiente:

A continuación, las columnas de desplazamiento se muestran como se muestra

Empuje y tracción de la columna

Bootstrap también nos permite reordenar columnas. Podemos usar las clases col-md-push-* o col-md-pull-* para hacer esto:

<div class="row">
    <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
 </div>

Aquí, la primera columna sería empujada por 3 columnas a la derecha y la segunda columna sería tirada a 9 columnas a la izquierda como se muestra a continuación:

Conclusión

Como hemos demostrado, puede usar varias clases proporcionadas por Bootstrap para crear diseños responsivos para sus aplicaciones web. En esta publicación, nos centramos en las clases de filas y columnas junto con el desplazamiento, la inserción, la extracción y el anidamiento de las columnas. Espero que este post os sea útil, ¡y gracias por leer!

Cree aplicaciones web modernas para cualquier escenario con sus marcos favoritos.Descargue Ignite UIhoy y experimente el poder de Infragistics controles jQuery.

Cómo