Contenedores

Cómo trabajan

Los contenedores son el elemento de diseño más básico en Bootstrap y son requeridos cuando se usa 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 breakpoint responsive
• .container-fluid, que es width: 100% en todos los breakpoints
• .container-{breakpoint}, que es width: 100% hasta el breakpoint especificado

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

Puedes verlo en acción y compararlos en nuestro ejemplo de cuadrícula.

Contenedor predeterminado

Nuestra clase .container predeterminada es un contenedor sensible de ancho fijo, lo que significa que su max-width cambia en cada breakpoint.

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

Contenedores responsive

Los contenedores responsive te permiten especificar una clase que tiene un 100% de ancho hasta que se alcanza el breakpoint especificado, después de lo cual aplicamos max-widths para cada uno de los breakpoints más altos. Por ejemplo, .container-sm tiene un 100% de ancho al principio hasta que se alcanza el breakpoint sm, donde se escalará con md, lg, xl y xxl.

<div class="container-sm">100% de ancho hasta el small breakpoint</div>
<div class="container-md">100% de ancho hasta el medium breakpoint</div>
<div class="container-lg">100% de ancho hasta el large breakpoint</div>
<div class="container-xl">100% de ancho hasta el extra large breakpoint</div>
<div class="container-xxl">100% de ancho hasta el extra extra large breakpoint</div>

Contenedores fluidos

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

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

Sass

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

$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 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;
}

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

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