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-{breakpoint}, que es width: 100% hasta el breakpoint especificado
• .container-fluid, que es width: 100% en todos los breakpoints

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.

Contenedor predeterminado

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>

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

Contenedores fluidos

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

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

CSS

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

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.

Mixins Sass

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