Contenedores (Containers)

Cómo funcionan

Los contenedores son el elemento de diseño más básico en Bootstrap y son obligatorios cuando se utiliza 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 ancho máximo (max-width) en cada punto de interrupción responsivo
• .container-{breakpoint}, que tiene un width: 100% hasta el punto de interrupción especificado
• .container-fluid, que tiene un width: 100% en todos los puntos de interrupción

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

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

Contenedor predeterminado

Nuestra clase .container predeterminada es un contenedor responsivo de ancho fijo, lo que significa que su ancho máximo (max-width) cambia en cada punto de interrupción.

<div class="container">
  <!-- Contenido aquí -->
</div>

Contenedores responsivos

Los contenedores responsivos te permiten especificar una clase que tiene un ancho del 100% hasta que se alcanza el punto de interrupción especificado, después del cual aplicamos anchos máximos (max-width) para cada uno de los puntos de interrupción superiores. Por ejemplo, .container-sm tiene un ancho del 100% para comenzar hasta que se alcanza el punto de interrupción sm, donde luego se escalará con md, lg, xl y xxl.

<div class="container-sm">100% de ancho hasta el punto de interrupción pequeño</div>
<div class="container-md">100% de ancho hasta el punto de interrupción mediano</div>
<div class="container-lg">100% de ancho hasta el punto de interrupción grande</div>
<div class="container-xl">100% de ancho hasta el punto de interrupción extra grande</div>
<div class="container-xxl">100% de ancho hasta el punto de interrupción extra extra grande</div>

Contenedores fluidos (Fluid containers)

Usa .container-fluid para un contenedor de ancho completo, que abarque todo el ancho de la ventana gráfica.

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

CSS

Variables Sass

Como se muestra arriba, Bootstrap genera a una serie de clases de contenedor predefinidas para ayudarte a construir 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 Sass de la documentación de Grid.

Mixins Sass

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

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

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