Bruno R
Elemento basico, utilizado en el sistema de cuadriculas. Tambien se utiliza para alinear horizontalmente el contenido en el caso del diseño con un ancho fijo.
Tipos de contenedores:
El ancho del contenedor cambiara en distintos brackpoints (tamaño de pantalla).
<div class="container">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>Indistintamente el ancho del contenedor sera siempre del 100%.
<div class="container-fluid">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>En este caso el contenedor sera del 100% hasta el punto indicado.
<div class="container-sm">100% wide until screen size less than 576px</div> <div class="container-md">100% wide until screen size less than 768px</div> <div class="container-lg">100% wide until screen size less than 992px</div> <div class="container-xl">100% wide until screen size less than 1200px</div>
De forma predeterminada el contenedor no tiene background-color o border, entonces podemos aplicarle estilos personales o utilizar estilos por defecto.
<!-- Contenedor con background oscuro con texto blanco -->
<div class="container bg-dark text-white">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>
<!-- contenedor con background blanco-->
<div class="container bg-light">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>
<!-- contenedor con borde -->
<div class="container border">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>De forma predeterminada los contenedores tienen un relleno del 12px, tanto a la izquierda como a la derecha y 0 en el eje Y. Para aplicar estos se pueden utilizar las clases de utilidad de espaciado
<!-- Contenedor con borde, padding y margin -->
<div class="container border py-3 my-3">
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>