Containers

Cómo funcionan

Los containers son el elemento de layout más básico de Bootstrap y son necesarios cuando se usa nuestro sistema de grid por defecto. Los containers se usan para contener, añadir padding y (a veces) centrar el contenido dentro de ellos. Aunque los containers pueden anidarse, la mayoría de layouts no requieren un container anidado.

Bootstrap viene con tres containers diferentes:

• .container, que establece un max-width en cada breakpoint responsive
• .container-fluid, que es width: 100% en todos los breakpoints
• .container-{breakpoint}, que es width: 100% hasta el breakpoint especificado

La tabla siguiente ilustra cómo el max-width de cada container se compara con el .container original y .container-fluid en cada breakpoint.

Míscalos en acción y compáralos en nuestro ejemplo del Grid.

Container por defecto

Nuestra clase .container por defecto es un container responsive de ancho fijo, lo que significa que su max-width cambia en cada breakpoint.

<div class="container">
  <!-- Content here -->
</div>

Containers responsive

Los containers responsive te permiten especificar una clase que es 100% ancha hasta que se alcanza el breakpoint especificado, después del cual aplicamos max-width para cada uno de los breakpoints superiores. Por ejemplo, .container-sm es 100% ancho al principio hasta que se alcanza el breakpoint sm, donde escalará con md, lg, xl y xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Containers fluidos

Usa .container-fluid para un container de ancho completo, que abarca todo el ancho del viewport.

<div class="container-fluid">
  ...
</div>

Sass

Como se muestra arriba, Bootstrap genera una serie de clases de container predefinidas para ayudarte a construir los layouts que deseas. Puedes personalizar estas clases de container predefinidas modificando el map de Sass (que se encuentra en _variables.scss) que las genera:

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

Además de personalizar el Sass, también puedes crear tus propios containers con nuestro mixin de Sass.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Para más información y ejemplos sobre cómo modificar nuestros mapas y variables de Sass, consulta la sección de Sass de la documentación del Grid.