Bootstrap 5 es la última versión del marco Bootstrap que permite a sus usuarios crear sitios web receptivos con un enfoque móvil primero. Bootstrap 5 tiene muchas características distintivas como tiene hojas de estilo rápidos y capacidad de respuesta mejorada. Una necesidad básica de este marco es un contenedor para envolver los elementos que aparecen en un sitio web. Un contenedor es el diseño más fundamental de Bootstrap 5 que discutiremos en profundidad en este artículo.

Vamos a empezar.

¿Qué son los contenedores?

Como ya se mencionó, los contenedores se consideran el diseño más fundamental de Bootstrap 5. Estas entidades envuelven elementos dentro de ellos junto con ciertos rellenos y margen. Además, estos son esenciales para construir un diseño de cuadrícula.

Hay un total de tres tipos de contenedores en Bootstrap 5 que nos hemos alistado a continuación.

1. Contenedores con ancho fijo
2. Contenedores con ancho completo
3. Contenedores con puntos de interrupción receptivos

Discutamos en detalle.

Contenedores con ancho fijo

Puede crear un contenedor receptivo con ancho fijo utilizando el .clase de contenedor. Este ancho cambiará dependiendo del tipo de dispositivo y el tamaño de la pantalla. Ahora exploremos este tipo de contenedor con un ejemplo.

Ejemplo

Aquí estamos envolviendo algo de contenido usando el contenedor con ancho fijo.

Html

Aquí estamos en primer lugar, incluidos Bootstrap 5, agregando CDN para CSS y JavaScript en la etiqueta de nuestro archivo HTML.

Html

Hola Mundo

Bootstrap 5 es increíble.

Estamos aprendiendo tipos de contenedores en Bootstrap 5.

Esta es una demostración del contenedor de ancho fijo que utiliza el .clase de contenedor.

Ahora estamos creando un contenedor Div y lo asignamos el contenedor de clase. Entonces hemos anidado uno

, y tres

Elementos en ese contenedor Div.

Producción

Vamos a mostrar la salida en tamaños de pantalla aleatorios. Por ejemplo, la salida a 699px y arriba se muestra a continuación.

A 351px y menos.

El .envase la clase se implementó con éxito.

Contenedores con ancho completo

Con el fin de crear contenedores con ancho completo, use el .fluido de contenedores clase. El ancho del contenedor será 100% sin importar cuál sea el tamaño de la pantalla. El ejemplo presentado a continuación demuestra un contenedor de ancho completo.

Html

Hola Mundo

Bootstrap 5 es increíble.

Estamos aprendiendo tipos de contenedores en Bootstrap 5.

Esta es una demostración del contenedor de ancho fijo que usa .clase de contenedor.

Aquí estamos usando .clase de contenedor-fluido para crear un elemento div y anidar un rumbo, y algunos párrafos dentro de ese div.

Producción

Mostraremos la salida en tamaños de pantalla aleatorios. La primera salida es para el ancho de pantalla 700px y arriba.

A 355px y abajo.

El .fluido de contenedores la clase funciona correctamente.

Contenedores con puntos de interrupción receptivos

También puede crear contenedores que retendrán el 100% de ancho hasta que se especifique un punto de interrupción. Esto significa que el ancho comenzará a cambiar después de ese punto de ruptura en particular. Para una mejor comprensión, hemos demostrado un ejemplo aquí.

Ejemplo

Aquí hemos demostrado todos los puntos de descanso mencionados anteriormente.

También puede crear contenedores que retendrán el 100% de ancho hasta que se especifique un punto de interrupción. Esto significa que el ancho comenzará a cambiar después de ese punto de ruptura en particular. Para una mejor comprensión, hemos demostrado un ejemplo aquí.
Ejemplo
Aquí hemos demostrado todos los puntos de descanso mencionados anteriormente.
[CCE_HTML Width = "100%" Height = "100%" Escaped = "True" theme = "Blackboard" Nowrap = "0"]
Pequeño
Medio
Grande
Extra grande
Extra extra grande

En el código anterior, hemos creado cinco contenedores DIV y a cada uno se le ha asignado una clase particular correspondiente a un punto de ruptura específico.

Producción

Los puntos de interrupción se implementaron con éxito.

Nota: Visite el sitio web oficial de Bootstrap 5 para consultar los anchos de varios contenedores en Bootstrap 5 en ciertos puntos de interrupción.

Conclusión

Los contenedores se consideran el diseño más fundamental de Bootstrap 5 que se utilizan para envolver elementos dentro de ellos junto con cierto acolchado y margen. Además, estos son esenciales para construir un diseño de cuadrícula. Hay un total de tres tipos de contenedores que son; contenedores con ancho fijo, contenedores con ancho completo y contenedor con puntos de interrupción receptivos. Hay ciertas clases incorporadas que están asociadas con estos contenedores. Todos estos tipos de contenedores se explican en el artículo junto con ejemplos adecuados.