Contenedor Bootstrap 5

Contenedor Bootstrap 5

Como aprendiste en el capítulo anterior, Bootstrap necesita elementos para envolver el contenido del sitio.

Rellenamos el contenido del contenedor y hay dos clases de contenedor disponibles:

  • .container clase proporciona un contenedor de ancho fijo, responsivo.
  • .container-fluid clase proporciona un contenedor de ancho completo, que abarca toda la anchura de la vista.

contenedor fijo

usar .container clase crea un contenedor fijo, de ancho variable, que responde a la anchura de la pantalla.

Tenga en cuenta que su anchura (max-widthcambia en diferentes tamaños de pantalla：

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Abra el siguiente ejemplo y ajuste el tamaño de la ventana del navegador para ver cómo cambia el ancho del contenedor en diferentes puntos de división:

Ejemplo

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

Prueba personalmente

XXL (≥1400px) es una nueva división en Bootstrap 5, mientras que el punto de división más grande en Bootstrap 4 es Extra large (≥1200px).

contenedor fluido

usar .container-fluid clase crea un contenedor de ancho completo, que siempre abarca toda la anchura de la pantalla (ancho siempre 100%）：

Ejemplo

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

Prueba personalmente

relleno del contenedor

Por defecto, el contenedor tiene relleno lateral (margen interno lateral), sin relleno superior o inferior (margen interno superior e inferior). Por lo tanto, a menudo usamos herramientas de espaciadoutilidades, como relleno adicional y márgenes, para que se vean mejor. Por ejemplo,.pt-5 significa "agregar un granrelleno superior：

Ejemplo

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

Prueba personalmente

Bordes y colores del contenedor

Otras herramientas, como bordes y colores, también se utilizan con frecuencia junto con el contenedor:

Ejemplo

<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>

Prueba personalmente

Aprenderá más sobre herramientas de colores y bordes en los capítulos posteriores.

contenedor sensible

También puede usar .container-sm|md|lg|xl para determinar cuándo debe responder el contenedor.

la clase del contenedor max-width cambia en diferentes tamaños de pantalla/viewport:

Clase Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥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

<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>

Prueba personalmente