Source

Sistema de red

Utilice nuestra potente cuadrícula 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 es totalmente receptivo. A continuación se muestra un ejemplo y una mirada en profundidad a cómo se une la cuadrícula.

¿Nuevo o no 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 extragrandes 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 .containerpara un ancho de píxel receptivo o .container-fluidpara width: 100%todos los tamaños de ventana gráfica y dispositivo.
Las filas son envoltorios para las columnas. Cada columna tiene una horizontal padding(llamada canaleta) para controlar el espacio entre ellas. Esto paddingluego 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 elementos secundarios inmediatos de las filas.
Gracias a flexbox, las columnas de la cuadrícula sin especificar se diseñarán widthautomáticamente como columnas de igual ancho. Por ejemplo, cuatro instancias de .col-smtendrán automáticamente un 25 % de ancho desde el punto de interrupción pequeño en adelante. 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 widthse establecen en porcentajes, por lo que siempre son fluidas y tienen un tamaño relativo a su elemento principal.
Las columnas tienen horizontal paddingpara crear los canalones entre columnas individuales, sin embargo, puede eliminar las marginfilas y las paddingcolumnas con .no-guttersel .row.
Para que la cuadrícula responda, hay cinco puntos de interrupción de la cuadrícula, uno para cada punto de interrupción receptivo : todos los puntos de interrupción (extra pequeño), pequeño, mediano, grande y extra grande.
Los puntos de interrupción de 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 (por ejemplo, .col-sm-4se aplica a dispositivos pequeños, medianos, grandes y extra grandes, pero no al primer punto de xsinterrupció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 los errores relacionados con flexbox , como la incapacidad de usar algunos elementos HTML como contenedores flexibles .

Opciones de cuadrícula

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

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

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

Columnas de diseño automático

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

ancho igual

Por ejemplo, aquí hay dos diseños de cuadrícula que se aplican a cada dispositivo y ventana gráfica, de xsa xl. Agregue cualquier número 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>

Las columnas de igual ancho se pueden dividir en varias líneas, pero hubo un error de Flexbox de Safari que impidió que esto funcionara sin un archivo explícito flex-basiso border. Existen soluciones para versiones anteriores de navegadores, pero no deberían ser necesarias si está actualizado.

Columna

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

Establecer un ancho de columna

El diseño automático para las columnas de cuadrícula de Flexbox también significa que puede establecer el ancho de una columna y hacer que las columnas hermanas cambien de tamaño automáticamente a su alrededor. Puede usar clases de cuadrícula predefinidas (como se muestra a continuación), combinaciones de cuadrícula 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}-autoclases 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>

Múltiples filas de igual ancho

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

columna

<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>

Clases receptivas

La cuadrícula de Bootstrap incluye cinco niveles de clases predefinidas para crear diseños receptivos complejos. 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 hasta el más grande, use las clases .coly . .col-*Especifique una clase numerada cuando necesite una columna de tamaño particular; de lo contrario, siéntete libre de apegarte a .col.

columna

col-8

col-4

<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>

Apilado a horizontal

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

col-sm-8

col-sm-4

col-sm

<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>

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-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Alineación

Use las utilidades de alineación de flexbox para alinear columnas vertical y horizontalmente.

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 canaletas

Los canalones entre columnas en nuestras clases de cuadrícula predefinidas se pueden eliminar con .no-gutters. marginEsto elimina la s negativa .rowy la horizontal paddingde todas las columnas secundarias inmediatas.

Aquí está el código fuente para crear estos estilos. Tenga en cuenta que las anulaciones de columna se limitan solo a 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? Suelte el padre .containero .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 continuar usándolo 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-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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 dentro de una sola fila, cada grupo de columnas adicionales se ajustará, como una unidad, 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 subsiguientes continúan a lo largo de la nueva línea.

<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>

Saltos de columna

Dividir columnas en una nueva línea en flexbox requiere un pequeño truco: agregue un elemento width: 100%donde quiera envolver sus columnas en una nueva línea. Normalmente, esto se logra con múltiples .rows, pero no todos los métodos de implementación pueden dar cuenta de esto.

.col-6 .col-sm-3

<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>

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

.col-6 .col-sm-4

<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>

reordenando

ordenar clases

Usa .order-clases para controlar el orden visual de tu contenido. Estas clases responden, por lo que puede establecer el orderpunto de interrupción (por ejemplo, .order-1.order-md-2). Incluye compatibilidad 1con 12los cinco niveles de cuadrícula.

Primero, pero desordenado

Segundo, pero último

Tercero, pero primero

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

También hay clases responsivas .order-firsty que cambian la forma de un elemento aplicando y ( ), respectivamente. Estas clases también se pueden mezclar con las clases numeradas según sea necesario..order-lastorderorder: -1order: 13order: $columns + 1.order-*

Primero, pero último

Segundo, pero desordenado

Tercero, pero primero

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

Columnas de compensación

Puede compensar las columnas de la cuadrícula de dos maneras: nuestras .offset-clases de cuadrícula receptivas y nuestras utilidades de margen . Las clases de cuadrícula se dimensionan para que coincidan 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

Mover columnas a la derecha usando .offset-md-*clases. Estas clases aumentan el margen izquierdo de una columna por *columnas. Por ejemplo, .offset-md-4se mueve .col-md-4sobre 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="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>

Además de borrar las 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 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="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>

Utilidades de margen

Con el cambio a flexbox en v4, puede usar utilidades de margen como .mr-autopara forzar que las columnas hermanas se separen entre sí.

.col-md-4

.col-md-4 .ml-auto

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

.col-auto .mr-auto

.col-auto

<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>

Anidamiento

Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .rowconjunto de .col-sm-*columnas dentro de una .col-sm-*columna existente. Las filas anidadas deben incluir un conjunto de columnas que suman 12 o menos (no es necesario que use 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="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>

mezclas descaradas

Al usar los archivos Sass de origen de Bootstrap, tiene la opción de usar variables Sass y mixins 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 de medianil y el punto de consulta de medios en el que comienzan 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
);

mezclas

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);

Ejemplo de uso

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

.example-container {
  width: 800px;
  @include make-container();
}

.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>

Personalización de la cuadrícula

Utilizando nuestras variables y mapas Sass de cuadrícula incorporados, es posible personalizar completamente las clases de cuadrícula predefinidas. Cambie la cantidad de niveles, las dimensiones de la consulta de medios y los anchos de los contenedores, luego vuelva a compilar.

Columnas y canaletas

El número de columnas de la cuadrícula se puede modificar mediante variables Sass. $grid-columnsse usa para generar los anchos (en porcentaje) de cada columna individual, mientras que $grid-gutter-widthpermite anchos específicos de punto de corte que se dividen uniformemente a lo largo padding-lefty padding-rightpara las medianeras de las columnas.

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

Niveles de cuadrícula

Yendo más allá de las columnas en sí, también puede personalizar la cantidad de niveles de cuadrícula. Si quisiera solo cuatro niveles de cuadrícula, actualizaría $grid-breakpointsy $container-max-widthsa algo como esto:

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

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

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