Contenedores en Bootstrap

En el capítulo anterior veíamos que Bootstrap requiere de un elemento contenedor para envolver el contenido de nuestros sitios web.

Los contenedores son usados para rellenar el contenido dentro de ellos, y existen dos clases de contenedores disponibles.

• .container: provee un contenedor responsive de ancho fijo.
• container-fluid: provee un contenedor responsive que utilizará todo el ancho de la pantalla.

Contenedor fijo

Usando la clase .container para crear un diseño responsive de ancho fijo. Observar que su ancho máximo (max-width) cambiará dependiendo de la pantalla desde la cual se vea la web.

Ejm

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Contenedor fluido

Utilizamos esta clase cuando queremos utilizar toda la pantalla, con lo que se usará el ancho completo de la misma (width será siempre el 100%).

Ejm

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Padding para nuestro contenedor

Por defecto, los contenedores tienen 15 px de padding tanto a la derecha como a la izquierda, por lo tanto, a menudo usamos utilidades de espaciado, como un extra padding y margin para dar a nuestra web otro diseño. Por ejm, .pt-3 significa ‘añadir al top padding 16 px’.

Ejm

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

Borde y color para nuestro contenedor

Ejm

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

mostrará el siguiente resultado

Contenedores Responsive

Podemos utilizar también la clase .container-sm|md|lg|xl para crear contenedores responsive. El ancho máximo (max-with) del contenedor mostrará, dependiendo de la pantalla, distintas visualizaciones.

Ejm

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