Bootstrap 4 Contenedores
Contenedores
Aprendió del capítulo anterior que Bootstrap requiere un elemento contenedor para envolver los contenidos del sitio.
Los contenedores se utilizan para rellenar el contenido dentro de ellos y hay dos clases de contenedores disponibles:
- La
.containerclase proporciona un contenedor de ancho fijo receptivo - La
.container-fluidclase proporciona un contenedor de ancho completo , que abarca todo el ancho de la ventana gráfica.
Contenedor fijo
Utilice la .containerclase para crear un contenedor receptivo de ancho fijo.
Tenga en cuenta que su ancho ( max-width) cambiará en diferentes tamaños de pantalla:
|
Muy pequeño <576 px |
Pequeño ≥576px |
Medio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|
|---|---|---|---|---|---|
| anchura máxima | 100% | 540px | 720px | 960px | 1140px |
Abra el siguiente ejemplo y cambie el tamaño de la ventana del navegador para ver que el ancho del contenedor cambiará en diferentes puntos de interrupción:
Ejemplo
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Contenedor de fluidos
Use la .container-fluidclase para crear un contenedor de ancho completo, que siempre abarcará todo el ancho de la pantalla ( widthsiempre 100%):
Ejemplo
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Relleno de contenedores
De forma predeterminada, los contenedores tienen un relleno izquierdo y derecho de 15 px, sin relleno superior o inferior. Por lo tanto, a menudo usamos utilidades de espaciado , como relleno y márgenes adicionales para que se vean aún mejor. Por ejemplo, .pt-3significa "agregar un relleno superior de 16px":
Ejemplo
<div class="container pt-3"></div>
Aprenderá mucho más sobre las utilidades de espaciado en nuestro Capítulo de utilidades BS4 .
Borde y color del contenedor
Otras utilidades, como bordes y colores, también se usan a menudo junto con los contenedores:
Ejemplo
Mi primera página de Bootstrap
Este contenedor tiene un borde y algo de relleno y márgenes adicionales.
Mi primera página de Bootstrap
Este contenedor tiene un color de fondo oscuro y un texto blanco, y algunos márgenes y relleno adicionales.
Mi primera página de Bootstrap
Este contenedor tiene un color de fondo azul y un texto blanco, y algunos márgenes y relleno adicionales.
<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>
Aprenderá mucho más sobre los colores y las utilidades de los bordes en nuestro Capítulo de colores de BS4 y el Capítulo de utilidades de BS4 .
Contenedores receptivos
También puede usar las .container-sm|md|lg|xlclases para crear contenedores receptivos.
El max-widthdel contenedor cambiará en diferentes tamaños de pantalla/ventanas:
| Clase |
Muy pequeño <576 px |
Pequeño ≥576px |
Medio ≥768px |
Grande ≥992px |
Extra grande ≥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 |
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>
¿Sabías?
W3.CSS es una excelente alternativa a Bootstrap 4.
W3.CSS es más pequeño, más rápido y más fácil de usar.
Si desea aprender W3.CSS, vaya a nuestro tutorial de W3.CSS .