Grids

Utilice nuestra poderosa cuadrícula de flexbox para dispositivos móviles para crear diseños de todas las formas y tamaños gracias a un sistema de doce columnas, cinco niveles de respuesta predeterminados, variables Sass y mixins, y docenas de clases predefinidas.

Cómo funciona

El sistema de cuadrícula de Bootstrap utiliza una serie de contenedores, filas y columnas para diseñar y alinear el contenido. Está construido con flexbox y responde completamente. A continuación se muestra un ejemplo y una mirada en profundidad a cómo se une la cuadrícula.

¿Es nuevo o no está familiarizado con flexbox? Lea esta guía de CSS Tricks flexbox para conocer los antecedentes, la terminología, las pautas y los fragmentos de código.

Una de tres columnas

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

El ejemplo anterior crea tres columnas de igual ancho en dispositivos pequeños, medianos, grandes y extra grandes utilizando nuestras clases de cuadrícula predefinidas. Esas columnas están centradas en la página con el padre .container .

Desglosándolo, así es como funciona:

Los contenedores proporcionan un medio para centrar y rellenar horizontalmente el contenido de su sitio. Úselo .container para un ancho de píxel receptivo o .container-fluid para width: 100% todos los tamaños de vista y dispositivo.
Las filas son envoltorios de columnas. Cada columna tiene una horizontal padding (llamada canaleta) para controlar el espacio entre ellas. Esto padding luego se contrarresta en las filas con márgenes negativos. De esta manera, todo el contenido de sus columnas se alinea visualmente en el lado izquierdo.
En un diseño de cuadrícula, el contenido debe colocarse dentro de las columnas y solo las columnas pueden ser hijos inmediatos de las filas.
Gracias a flexbox, las columnas de la cuadrícula sin un especificado width se distribuirán automáticamente como columnas de igual ancho. Por ejemplo, cuatro instancias de .col-sm tendrán automáticamente un 25% de ancho desde el punto de interrupción pequeño y hacia arriba. Consulte la sección de columnas de diseño automático para obtener más ejemplos.
Las clases de columna indican la cantidad de columnas que le gustaría usar de las 12 posibles por fila. Entonces, si desea tres columnas de igual ancho, puede usar .col-4 .
Las columnas width se establecen en porcentajes, por lo que siempre son fluidas y tienen un tamaño relativo a su elemento principal.
Las columnas tienen horizontales padding para crear los medianiles entre columnas individuales, sin embargo, puede eliminar de las margin filas y padding de las columnas con .no-gutters en .row .
Para que la cuadrícula responda, hay cinco puntos de interrupción de la cuadrícula, uno para cada punto de interrupción de respuesta : todos los puntos de interrupción (extra pequeños), pequeños, medianos, grandes y extra grandes.
Los puntos de interrupción de la cuadrícula se basan en consultas de medios de ancho mínimo, lo que significa que se aplican a ese punto de interrupción y a todos los que están por encima de él (por ejemplo, se .col-sm-4 aplica a dispositivos pequeños, medianos, grandes y extra grandes, pero no al primer xs punto de interrupción).
Puede usar clases de cuadrícula predefinidas (como .col-4 ) o mixins de Sass para un marcado más semántico.

Tenga en cuenta las limitaciones y errores de flexbox , como la imposibilidad de utilizar algunos elementos HTML como contenedores flexibles .

Opciones de cuadrícula

Mientras Bootstrap usa em s o rem s para definir la mayoría de los tamaños, px s se usan para puntos de interrupción de cuadrícula y anchos de contenedor. Esto se debe a que el ancho de la ventana gráfica está en píxeles y no cambia con el tamaño de fuente .

Vea cómo funcionan los aspectos del sistema de cuadrícula Bootstrap en múltiples dispositivos con una práctica tabla.

	Extra pequeño <576px	Pequeño ≥576px	Medio ≥768px	Grande ≥992px	Extra grande ≥1200px
Ancho máximo del contenedor	Ninguno (automático)	540 px	720px	960 px	1140 px
Prefijo de clase	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# de columnas	12
Ancho de canal	30px (15px a cada lado de una columna)
Encajable	si
Orden de columnas	si

Columnas de diseño automático

Utilice clases de columna específicas de puntos de interrupción para facilitar el tamaño de la columna sin una clase numerada explícita como .col-sm-6 .

Igual ancho

Por ejemplo, aquí hay dos diseños de cuadrícula que se aplican a todos los dispositivos y ventanas gráficas, desde xs hasta xl . Agregue cualquier cantidad de clases sin unidades para cada punto de interrupción que necesite y cada columna tendrá el mismo ancho.

1 de 2

2 de 2

1 de 3

2 de 3

3 de 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Multilínea de igual ancho

Cree columnas de igual ancho que abarquen varias líneas insertando un lugar .w-100 donde desee que las columnas se dividan en una nueva línea. Haga que los descansos sean receptivos mezclándolos .w-100 con algunas utilidades de pantalla receptivas .

Hubo un error en Safari flexbox que impidió que esto funcionara sin un explícito flex-basis o border . Existen soluciones para las versiones anteriores del navegador, pero no deberían ser necesarias si los navegadores de destino no caen en las versiones con errores.

columna

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Establecer un ancho de columna

El diseño automático de las columnas de la cuadrícula de flexbox también significa que puede establecer el ancho de una columna y hacer que las columnas hermanas se redimensionen automáticamente a su alrededor. Puede usar clases de cuadrícula predefinidas (como se muestra a continuación), combinaciones de cuadrículas o anchos en línea. Tenga en cuenta que las otras columnas cambiarán de tamaño sin importar el ancho de la columna central.

1 de 3

2 de 3 (más ancho)

3 de 3

1 de 3

2 de 3 (más ancho)

3 de 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contenido de ancho variable

Use col-{breakpoint}-auto clases para dimensionar columnas según el ancho natural de su contenido.

1 de 3

Contenido de ancho variable

3 de 3

1 de 3

Contenido de ancho variable

3 de 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Clases receptivas

La cuadrícula de Bootstrap incluye cinco niveles de clases predefinidas para crear diseños complejos de respuesta. Personalice el tamaño de sus columnas en dispositivos extra pequeños, pequeños, medianos, grandes o extra grandes como mejor le parezca.

Todos los puntos de interrupción

Para cuadrículas que son iguales desde el dispositivo más pequeño al más grande, use las clases .col y .col-* . Especifique una clase numerada cuando necesite una columna de tamaño especial; de lo contrario, no dude en seguir .col .

columna

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Apilado a horizontal

Con un solo conjunto de .col-sm-* clases, puede crear un sistema de cuadrícula básico que comienza apilado y se vuelve horizontal en el pequeño punto de interrupción ( sm ).

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mezclar y combinar

¿No quiere que sus columnas simplemente se apilen en algunos niveles de cuadrícula? Use una combinación de diferentes clases para cada nivel según sea necesario. Vea el ejemplo a continuación para tener una mejor idea de cómo funciona todo.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Canalones

Los canalones se pueden ajustar de manera receptiva mediante clases de utilidad de margen negativo y relleno específico del punto de interrupción. Para cambiar los medianiles en una fila determinada, empareje una utilidad de margen negativo en .row y las utilidades de relleno coincidentes en el .col s. Es posible que el .container o el .container-fluid padre también deba ajustarse para evitar un desbordamiento no deseado, utilizando nuevamente la utilidad de relleno coincidente.

Aquí hay un ejemplo de cómo personalizar la cuadrícula Bootstrap en el lg punto de interrupción grande ( ) y superior. Hemos aumentado el .col acolchado con .px-lg-5 , lo hemos contrarrestado con .mx-lg-n5 en el padre .row y luego hemos ajustado la .container envoltura con .px-lg-5 .

Relleno de columna personalizado

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Columnas de fila

Utilice las .row-cols-* clases receptivas para establecer rápidamente la cantidad de columnas que mejor representen su contenido y diseño. Mientras que las .col-* clases normales se aplican a las columnas individuales (p. Ej., .col-md-4 ), Las clases de columnas de fila se establecen en el padre .row como un atajo.

Utilice estas clases de filas y columnas para crear rápidamente diseños de cuadrícula básicos o para controlar los diseños de sus tarjetas.

Columna

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Columna

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Columna

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Columna

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Columna

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

También puede utilizar el mixin Sass que lo acompaña row-cols() :

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Alineación

Utilice las utilidades de alineación de flexbox para alinear columnas vertical y horizontalmente. Internet Explorer 10-11 no admite la alineación vertical de elementos flexibles cuando el contenedor flexible tiene un min-height como se muestra a continuación. Consulte Flexbugs # 3 para obtener más detalles.

Alineamiento vertical

Una de tres columnas

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una de tres columnas

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Alineación horizontal

Una de dos columnas

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Sin canalones

Los medianiles entre columnas en nuestras clases de cuadrícula predefinidas se pueden eliminar con .no-gutters . Esto elimina la negativa margin s de .row y la horizontal padding de todas las columnas hijos inmediatos.

Aquí está el código fuente para crear estos estilos. Tenga en cuenta que las anulaciones de columnas tienen un alcance solo en las primeras columnas secundarias y se orientan a través del selector de atributos . Si bien esto genera un selector más específico, el relleno de columnas aún se puede personalizar aún más con las utilidades de espaciado .

¿Necesita un diseño de borde a borde? Deja al padre .container o madre .container-fluid .

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

En la práctica, así es como se ve. Tenga en cuenta que puede seguir usando esto con todas las demás clases de cuadrícula predefinidas (incluidos los anchos de columna, los niveles de respuesta, los reordenamientos y más).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Envoltura de columna

Si se colocan más de 12 columnas en una sola fila, cada grupo de columnas adicionales, como una unidad, se ajustará a una nueva línea.

.col-9

.col-4
Dado que 9 + 4 = 13> 12, este div de 4 columnas de ancho se envuelve en una nueva línea como una unidad contigua.

.col-6
Las columnas siguientes continúan a lo largo de la nueva línea.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Saltos de columna

Romper columnas a una nueva línea en flexbox requiere un pequeño truco: agregue un elemento width: 100% donde quiera que desee ajustar sus columnas a una nueva línea. Normalmente, esto se logra con varios .row s, pero no todos los métodos de implementación pueden dar cuenta de esto.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

También puede aplicar esta interrupción en puntos de interrupción específicos con nuestras utilidades de pantalla receptiva .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Reordenación

Clases de pedidos

Utilice .order- clases para controlar el orden visual de su contenido. Estas clases responden, por lo que puede establecer el order punto de interrupción (por ejemplo, .order-1.order-md-2 ). Incluye soporte para 1 a través 12 a través de todos los cinco niveles de la red.

Primero en DOM, no se aplicó orden

Segundo en DOM, con un pedido mayor

Tercero en DOM, con un orden de 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

También hay clases responsive .order-first y .order-last que cambian el valor order de un elemento aplicando order: -1 y order: 13 ( order: $columns + 1 ), respectivamente. Estas clases también se pueden mezclar con las .order-* clases numeradas según sea necesario.

Primero en DOM, ordenado al final

Segundo en DOM, desordenado

Tercero en DOM, ordenado primero

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Desplazamiento de columnas

Puede compensar las columnas de la cuadrícula de dos formas: nuestras .offset- clases de cuadrícula receptivas y nuestras utilidades de margen . Las clases de cuadrícula se dimensionan para coincidir con las columnas, mientras que los márgenes son más útiles para diseños rápidos donde el ancho del desplazamiento es variable.

Clases de compensación

Mueva las columnas a la derecha usando .offset-md-* clases. Estas clases aumentan el margen izquierdo de una columna por * columnas. Por ejemplo, se .offset-md-4 mueve .col-md-4 sobre cuatro columnas.

.col-md-4

.col-md-4 .desplazamiento-md-4

.col-md-3 .desplazamiento-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Además de la limpieza de columnas en los puntos de interrupción de respuesta, es posible que deba restablecer las compensaciones. Vea esto en acción en el ejemplo de la cuadrícula .

.col-sm-5 .col-md-6

.col-sm-5 .desplazamiento-sm-2 .col-md-6 .desplazamiento-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Utilidades de margen

Con el cambio a flexbox en v4, puede usar utilidades de margen, como .mr-auto forzar a las columnas hermanas a separarse unas de otras.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Anidamiento

Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .row conjunto de .col-sm-* columnas dentro de una .col-sm-* columna existente . Las filas anidadas deben incluir un conjunto de columnas que sumen 12 o menos (no es necesario que utilice las 12 columnas disponibles).

Nivel 1: .col-sm-9

Nivel 2: .col-8 .col-sm-6

Nivel 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Mixins de Sass

Al usar los archivos Sass de origen de Bootstrap, tiene la opción de usar variables y mixins de Sass para crear diseños de página personalizados, semánticos y receptivos. Nuestras clases de cuadrícula predefinidas utilizan estas mismas variables y combinaciones para proporcionar un conjunto completo de clases listas para usar para diseños de respuesta rápida.

Variables

Las variables y los mapas determinan el número de columnas, el ancho del margen y el punto de consulta de medios en el que comenzar las columnas flotantes. Los usamos para generar las clases de cuadrícula predefinidas documentadas anteriormente, así como para los mixins personalizados que se enumeran a continuación.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Los mixins se utilizan junto con las variables de cuadrícula para generar CSS semántico para columnas de cuadrícula individuales.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Uso de ejemplo

Puede modificar las variables a sus propios valores personalizados, o simplemente usar los mixins con sus valores predeterminados. A continuación, se muestra un ejemplo del uso de la configuración predeterminada para crear un diseño de dos columnas con un espacio entre ellas.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Contenido principal

Contenido secundario

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalizando la cuadrícula

Utilizando nuestras variables y mapas Sass de cuadrícula incorporados, es posible personalizar completamente las clases de cuadrícula predefinidas. Cambie el número de niveles, las dimensiones de la consulta de medios y el ancho del contenedor y luego vuelva a compilar.

Columnas y canalones

El número de columnas de la cuadrícula se puede modificar mediante variables Sass. $grid-columns se utiliza para generar los anchos (en porcentaje) de cada columna individual mientras $grid-gutter-width establece el ancho de las canaletas de las columnas.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Niveles de cuadrícula

Más allá de las propias columnas, también puede personalizar el número de niveles de cuadrícula. Si solo quisiera cuatro niveles de cuadrícula, actualizaría $grid-breakpoints y $container-max-widths a algo como esto:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Cuando realice cambios en las variables o mapas de Sass, deberá guardar los cambios y volver a compilarlos. Al hacerlo, se generará un nuevo conjunto de clases de cuadrícula predefinidas para anchos de columna, compensaciones y orden. Las utilidades de visibilidad receptiva también se actualizarán para usar los puntos de interrupción personalizados. Asegúrese de que los valores de cuadrícula en conjunto px (no rem , em o % ).