<!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 (&lt;768px), y se comporta como contenedor centrado fijo a partir de tablets y escritorios (&ge;768px).
    </p>
  </div>

</body>
</html>