Contenedores en Boostrap

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.

Contenedores

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.

Extra small

< 576 px

Small

≥ 576 px

Medium

≥ 720 px

Large

≥ 960 px

Extra large

≥ 1140 px

max-width 100% 540 px 720 px 960 px 1140 px

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

Borde y color de contenedor

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.

Class Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px

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>