Contenedores Bootstrap 5

En el capítulo anterior aprendimos que Bootstrap necesita un elemento contenedor para envolver el contenido del sitio web.

Podemos usar las siguientes dos clases de contenedor:

  • .containerLa clase es el contenedor predeterminado, proporciona un diseño de ancho fijo, y el ancho se ajusta según el tamaño de la pantalla.
  • .container-fluidLa clase se usa para un ancho del 100%, un contenedor que ocupa todo el viewport. Usar esta clase de contenedor siempre llenará el ancho de la pantalla, adecuado para diseños de pantalla completa.

Ancho fijo

.containerLa clase se usa para crear páginas responsivas de ancho fijo.

Nota:El ancho (max-width) se ampliará o reducirá proporcionalmente según el ancho de la pantalla.

Pantalla extra pequeña
<576px 		Pantalla pequeña
≥576px 		Pantalla mediana
≥768px 		Pantalla grande
≥992px 		Pantalla extra grande
≥1200px 		Pantalla extra extra grande
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

En el siguiente ejemplo, podemos intentar ajustar el tamaño de la ventana del navegador para ver cómo cambia el ancho del contenedor en diferentes pantallas:

Ejemplo de .container de Bootstrap 5

<div class="container"> <h1>Mi primera página de Bootstrap</h1> <p>Este es un texto.</p> </div>

Pruébalo »

Nota:La pantalla extra extra grande (≥1400px) es nueva en Bootstrap 5; la más grande en Bootstrap 4 era la extra grande (≥1200px).

Ancho 100%

.container-fluidLa clase se usa para crear un contenedor de tamaño de pantalla completa; el contenedor siempre abarca todo el ancho de la pantalla (width siempre es 100%):

Ejemplo de .container-fluid de Bootstrap 5

<div class="container-fluid"> <h1>Mi primera página de Bootstrap</h1> <p>Se usó .container-fluid, ancho 100%, un contenedor que ocupa todo el viewport.</p> </div>

Pruébalo »

Relleno del contenedor

De forma predeterminada, los contenedores tienen relleno en los lados izquierdo y derecho, pero no en la parte superior e inferior. Bootstrap proporciona algunas clases de espaciado para rellenar los márgenes. Por ejemplo.pt-5se usa para agregar relleno superior:

Ejemplo de Bootstrap 5

<div class="container pt-5"></div>

Pruébalo »

Bordes y colores del contenedor

Bootstrap también proporciona algunas clases de bordes (border) y colores (bg-dark, bg-primary, etc.) para estilizar los contenedores:

Ejemplo de Bootstrap 5

<div class="container p-5 my-5 border"></div> <div class="container p-5 my-5 bg-dark text-white"></div> <div class="container p-5 my-5 bg-primary text-white"></div>

Pruébalo »

En capítulos posteriores explicaremos estos estilos en detalle.

Contenedores responsivos

Puedes usar.container-sm|md|lg|xlla clase para crear contenedores responsivos.

El valor de la propiedad max-width del contenedor cambiará según el tamaño de la pantalla.

Class Pantalla extra pequeña
<576px 		Pantalla pequeña
≥576px 		Pantalla mediana
≥768px 		Pantalla grande
≥992px 		Pantalla extra grande
≥1200px 		Pantalla extra extra grande
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Ejemplo de Bootstrap 5

<div class="container-sm">.container-sm</div> <div class="container-md">.container-md</div> <div class="container-lg">.container-lg</div> <div class="container-xl">.container-xl</div> <div class="container-xxl">.container-xxl</div>

Pruébalo »
Otras extensiones