Contenedores

Cómo trabajan ellos

Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios 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 se pueden anidar, la mayoría de los diseños no requieren un contenedor anidado.

Bootstrap viene con tres contenedores diferentes:

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

La siguiente tabla ilustra cómo se max-widthcompara cada contenedor con el original .containery .container-fluiden cada punto de interrupción.

Véalos en acción y compárelos en nuestro ejemplo de Grid .

Contenedor predeterminado

Nuestra clase predeterminada .containeres un contenedor receptivo de ancho fijo, lo que significa que max-widthcambia en cada punto de interrupción.

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

Contenedores receptivos

Los contenedores receptivos le permiten especificar una clase que tiene un 100 % de ancho hasta que se alcanza el punto de interrupción especificado, después de lo cual aplicamos max-widths para cada uno de los puntos de interrupción más altos. Por ejemplo, .container-smtiene un 100 % de ancho para comenzar hasta smque se alcanza el punto de interrupción, donde se ampliará con md, lg, xly 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 de fluidos

Úselo .container-fluidpara un contenedor de ancho completo, que abarque todo el ancho de la ventana gráfica.

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

Hablar con descaro a

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

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

Además de personalizar el Sass, también puede crear sus propios contenedores con nuestra mezcla 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 obtener más información y ejemplos sobre cómo modificar nuestros mapas y variables Sass, consulte la sección Sass de la documentación de Grid .