Contenedores y Puntos de Ruptura (Breakpoints)
Comprende el bloque base de maquetación en Bootstrap 5: contenedor fijo (.container) frente a fluido (.container-fluid) y la matriz de 6 puntos de ruptura responsivos.
¿Qué es un Contenedor en Bootstrap?
Los contenedores son el elemento estructural primario en Bootstrap 5. Son obligatorios para alojar, acolchar (padding horizontal) y centrar el contenido y las filas del sistema de rejilla.
| Clase | Comportamiento de Ancho | Uso Recomendado |
|---|---|---|
.container |
Ancho fijo escalonado que se centra automáticamente con margin: auto en cada breakpoint. |
Sitios corporativos, blogs, páginas de lectura y formularios centrales. |
.container-fluid |
Ocupa el 100% de la anchura del viewport en todo momento y dispositivo. | Paneles de administración (dashboards), mapas y barras de navegación a pantalla completa. |
.container-{breakpoint} |
Fluido al 100% hasta que alcanza el breakpoint indicado (ej. .container-md es fluido hasta 768px). |
Diseños que requieren ancho total en móviles pero contención fija en computadores. |
La Escala de Breakpoints de Bootstrap 5
Bootstrap divide las dimensiones de pantalla en 6 puntos de ruptura estándar basados en consultas de medios @media (min-width):
| Breakpoint | Sufijo | Dimensión | Dispositivos Típicos |
|---|---|---|---|
| Extra pequeño | (ninguno) | <576px | Teléfonos en posición vertical |
| Pequeño | sm |
≥576px | Teléfonos grandes / posición horizontal |
| Mediano | md |
≥768px | Tablets (iPad, Galaxy Tab) |
| Grande | lg |
≥992px | Laptops y pantallas de escritorio estándar |
| Extra grande | xl |
≥1200px | Monitores de alta resolución |
| Extra extra grande | xxl |
≥1400px | Monitores ultra panorámicos y Smart TVs |
⚡ Comparación Visual: .container vs .container-fluid
Observa cómo .container centra su contenido con márgenes laterales en pantallas anchas, mientras .container-fluid se expande de extremo a extremo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contenedores en Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light py-4">
<!-- 1. Contenedor Fijo Centrado -->
<div class="container bg-primary text-white p-4 rounded-3 mb-4 shadow-sm">
<h3 class="fw-bold mb-2">1. Contenedor Fijo (.container)</h3>
<p class="mb-0">
Este contenedor tiene un <code>max-width</code> responsivo que se ajusta escalonadamente a los breakpoints (sm, md, lg, xl, xxl) y permanece centrado con márgenes automáticos a los lados.
</p>
</div>
<!-- 2. Contenedor Fluido al 100% -->
<div class="container-fluid bg-dark text-white p-4 mb-4">
<h3 class="fw-bold mb-2">2. Contenedor Fluido (.container-fluid)</h3>
<p class="mb-0">
Este contenedor ocupa exactamente el <strong>100% del ancho de la pantalla</strong> sin importar el tamaño del monitor o teléfono móvil.
</p>
</div>
<!-- 3. Contenedor Condicional Responsivo -->
<div class="container-md bg-success text-white p-4 rounded-3 shadow-sm">
<h3 class="fw-bold mb-2">3. Contenedor Condicional (.container-md)</h3>
<p class="mb-0">
Es 100% fluido en pantallas móviles pequeñas (<768px), y se comporta como contenedor centrado fijo a partir de tablets y escritorios (≥768px).
</p>
</div>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.