Sistema de grid

Ejemplo

El sistema de grid de Bootstrap usa una serie de containers, rows y columns para maquetar y alinear el contenido. Está construido con flexbox y es totalmente responsive. A continuación se muestra un ejemplo y una explicación en profundidad de cómo se compone el sistema de grid.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

El ejemplo anterior crea tres columnas de igual ancho en todos los dispositivos y viewports usando nuestras clases de grid predefinidas. Esas columnas están centradas en la página con el .container padre.

Cómo funciona

Desglosándolo, así es como se compone el sistema de grid:

• Nuestro grid soporta seis breakpoints responsive. Los breakpoints se basan en media queries de min-width, lo que significa que afectan a ese breakpoint y a todos los superiores (por ejemplo, .col-sm-4 se aplica a sm, md, lg, xl y xxl). Esto significa que puedes controlar el tamaño y comportamiento de los containers y columnas por cada breakpoint.

• Los containers centran y añaden padding horizontal a tu contenido. Usa .container para un ancho en píxeles responsive, .container-fluid para width: 100% en todos los viewports y dispositivos, o un container responsive (por ejemplo, .container-md) para una combinación de anchos fluidos y en píxeles.

• Las rows son contenedores para columnas. Cada columna tiene un padding horizontal (llamado gutter) para controlar el espacio entre ellas. Este padding se contrarresta en las rows con margins negativos para asegurar que el contenido de tus columnas esté visualmente alineado en el lado izquierdo. Las rows también soportan clases modificadoras para aplicar uniformemente el tamaño de columna y clases de gutter para cambiar el espaciado de tu contenido.

• Las columnas son increíblemente flexibles. Hay 12 columnas de plantilla disponibles por fila, permitiéndote crear diferentes combinaciones de elementos que abarcan cualquier número de columnas. Las clases de columna indican el número de columnas de plantilla a abarcar (por ejemplo, col-4 abarca cuatro). Los widths se establecen en porcentajes para que siempre tengas el mismo tamaño relativo.

• Los gutters también son responsive y personalizables. Las clases de gutter están disponibles en todos los breakpoints, con los mismos tamaños que nuestro espaciado de margin y padding. Cambia los gutters horizontales con las clases .gx-*, los verticales con .gy-*, o todos los gutters con las clases .g-*. .g-0 también está disponible para eliminar los gutters.

• Las variables, maps y mixins de Sass potencian el grid. Si no quieres usar las clases de grid predefinidas de Bootstrap, puedes usar el Sass fuente de nuestro grid para crear el tuyo propio con un marcado más semántico. También incluimos algunas propiedades personalizadas CSS para consumir estas variables Sass para una mayor flexibilidad.

Ten en cuenta las limitaciones y los bugs relacionados con flexbox, como la incapacidad de usar algunos elementos HTML como contenedores flex.

Opciones del grid

El sistema de grid de Bootstrap puede adaptarse a los seis breakpoints por defecto, y a cualquier breakpoint que personalices. Los seis grid tiers por defecto son los siguientes:

• Extra pequeño (xs)
• Pequeño (sm)
• Mediano (md)
• Grande (lg)
• Extra grande (xl)
• Extra extra grande (xxl)

Como se mencionó arriba, cada uno de estos breakpoints tiene su propio container, prefijo de clase único y modificadores. Así es como cambia el grid entre estos breakpoints:

Columnas auto-layout

Usa clases de columna específicas por breakpoint para un fácil dimensionado de columnas sin una clase numerada explícita como .col-sm-6.

Ancho igual

Por ejemplo, aquí hay dos layouts de grid que se aplican a todos los dispositivos y viewports, desde xs hasta xxl. Añade cualquier número de clases sin unidades para cada breakpoint que necesites y cada columna tendrá el mismo ancho.

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

Establecer el ancho de una columna

El auto-layout para columnas de grid flexbox también significa que puedes establecer el ancho de una columna y que las columnas hermanas se redimensionen automáticamente alrededor de ella. Puedes usar clases de grid predefinidas (como se muestra abajo), mixins de grid, o anchos inline. Ten en cuenta que las otras columnas se redimensionarán sin importar el ancho de la columna central.

<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

Usa las clases col-{breakpoint}-auto para dimensionar columnas basándose en el ancho natural de su contenido.

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

El grid de Bootstrap incluye seis niveles de clases predefinidas para construir layouts responsive complejos. Personaliza el tamaño de tus columnas en dispositivos extra pequeños, pequeños, medianos, grandes o extra grandes como prefieras.

Todos los breakpoints

Para grids que son iguales desde el más pequeño de los dispositivos hasta el más grande, usa las clases .col y .col-*. Especifica una clase numerada cuando necesites una columna de un tamaño particular; de lo contrario, siéntete libre de quedarte con .col.

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

Apiladas a horizontal

Usando un único conjunto de clases .col-sm-*, puedes crear un sistema de grid básico que empieza apilado y se vuelve horizontal en el breakpoint small (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 quieres que tus columnas simplemente se apilen en algunos grid tiers? Usa una combinación de diferentes clases para cada nivel según lo necesites. Mira el ejemplo de abajo para tener una mejor idea de cómo funciona todo.

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

Columnas de fila

Usa las clases responsive .row-cols-* para establecer rápidamente el número de columnas que mejor renderizan tu contenido y layout. Mientras que las clases normales .col-* se aplican a las columnas individuales (por ejemplo, .col-md-4), las clases de row columns se establecen en el .row padre como valor por defecto para las columnas contenidas. Con .row-cols-auto puedes dar a las columnas su ancho natural.

Usa estas clases de row columns para crear rápidamente layouts de grid básicos o para controlar tus layouts de card y sobrescribir cuando sea necesario a nivel de 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>

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

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

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

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

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

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

También puedes usar el mixin de 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);
  }
}

Anidamiento

Para anidar tu contenido con el grid por defecto, añade una nueva .row y un conjunto de columnas .col-sm-* dentro de una columna .col-sm-* existente. Las rows anidadas deben incluir un conjunto de columnas que sumen 12 o menos (no es necesario que uses las 12 columnas disponibles).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>

Sass

Al usar los archivos fuente Sass de Bootstrap, tienes la opción de usar variables y mixins de Sass para crear layouts de página personalizados, semánticos y responsive. Nuestras clases de grid predefinidas usan estas mismas variables y mixins para proporcionar todo un conjunto de clases listas para usar para layouts responsive rápidos.

Variables

Las variables y maps determinan el número de columnas, el ancho del gutter y el punto de media query en el que comenzar a flotar columnas. Los usamos para generar las clases de grid predefinidas documentadas arriba, así como para los mixins personalizados listados abajo.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

Mixins

Los mixins se usan junto con las variables del grid para generar CSS semántico para columnas individuales del grid.

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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

Puedes modificar las variables con tus propios valores personalizados, o simplemente usar los mixins con sus valores por defecto. Aquí hay un ejemplo de uso de la configuración por defecto para crear un layout 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);
  }
}

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

Personalizar el grid

Usando nuestras variables y maps de Sass integrados en el grid, es posible personalizar completamente las clases de grid predefinidas. Cambia el número de niveles, las dimensiones de las media queries y los anchos de los containers—luego recompila.

Columnas y gutters

El número de columnas del grid se puede modificar mediante variables Sass. $grid-columns se usa para generar los anchos (en porcentaje) de cada columna individual mientras que $grid-gutter-width establece el ancho de los gutters de las columnas.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Grid tiers

Más allá de las columnas mismas, también puedes personalizar el número de grid tiers. Si quisieras solo cuatro grid tiers, actualizarías $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
);

Al hacer cualquier cambio en las variables o maps de Sass, necesitarás guardar tus cambios y recompilar. Al hacerlo se generará un nuevo conjunto de clases de grid predefinidas para anchos de columna, desplazamientos y ordenación. Las utilidades de visibilidad responsive también se actualizarán para usar los breakpoints personalizados. Asegúrate de establecer los valores del grid en px (no en rem, em o %).