Contenedores

Cómo funcionan

Los contenedores son el elemento de diseño más básico en Bootstrap y son requeridos cuando usamos nuestro sistema de cuadrícula predeterminado. Los contenedores se utilizan para contener, rellenar y (a veces) centrar el contenido dentro de ellos. Si bien los contenedores pueden anidarse, la mayoría de los diseños no requieren un contenedor anidado.

Bootstrap viene con tres contenedores diferentes:

• .container, que establece un max-width en cada punto de interrupción responsive
• .container-{breakpoint}, que es width: 100% hasta el punto de interrupción especificado
• .container-fluid, que es width: 100% en todos los puntos de interrupción

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

Velos en acción y compáralos en nuestro ejemplo de cuadrícula.

Contenedor predeterminado

Nuestra clase .container predeterminada es un contenedor responsive de ancho fijo, lo que significa que su max-width cambia en cada punto de interrupción.

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

Contenedores responsive

Los contenedores responsive te permiten especificar una clase que tiene un ancho del 100% hasta que se alcanza el punto de interrupción especificado, después de lo cual aplicamos max-width para cada uno de los puntos de interrupción más altos. Por ejemplo, .container-sm tiene un ancho 100% para comenzar hasta que se alcance el punto de interrupción sm, donde se ampliará 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 fluid

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

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

CSS

Variables Sass

Como se muestra arriba, Bootstrap genera una serie de clases contenedoras predefinidas para ayudarte a crear los diseños que deseas. Puedes personalizar estas clases de contenedores predefinidas modificando el mapa Sass (que se encuentra en _variables.scss) que las impulsa:

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

Para obtener 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 de Grid (cuadrícula).

Sass mixins

Además de personalizar el Sass, también puedes crear tus propios contenedores con nuestro mixin 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();
}