Bootstrap

Maquetación

Columnas

<body>
<main class="container text-center">
  <article class="row">
    <section class="col-3 alert alert-primary">
      Esta columna ocupa 3 huecos de los 12 disponibles. Su clase es <code>col-3</code>.
    </section>
    <section class="col-4 alert alert-warning">
      Esta columna ocupa 4 huecos de los 12 disponibles. Su clase es <code>col-4</code>. En total, todas las columnas han de sumar 12 (= 3 + 4 + 5, en este caso).
    </section>
    <section class="col-5 alert alert-success">
      Esta columna ocupa 5 huecos de los 12 disponibles. Su clase es <code>col-5</code>. Además, cada una de estas secciones utiliza los estilos de <a href="https://getbootstrap.com/docs/5.3/components/alerts/">alertas de Bootstrap</a>.
    </section>
  </article>
</main>
</body>
section { font-size: 75%; border-radius: 0 !important; margin-bottom: 0 !important; }

❓ Ejercicio: Modifica el HTML para que las 3 columnas ocupen el mismo ancho. ¿Qué pasa si las clases de las columnas no suman 12?