Bootstrap

Maquetación

Apilamiento

<body>
<main class="container text-center">
  <article class="row">
    <section class="col-sm alert alert-primary">
      Estas columnas se apilan solo cuando el ancho es pequeño: <strong>menor que 576px</strong>.
    </section>
    <section class="col-sm alert alert-primary">
      Usan la clase <code>col-sm</code>.
    </section>
    <section class="col-sm alert alert-primary">
      El ancho se reparte equitativamente cuando no están apiladas.
    </section>
  </article>
  <article class="row">
    <section class="col-md alert alert-warning">
      Estas columnas se apilan solo cuando el ancho es mediano: <strong>menor que 768px</strong>.
    </section>
    <section class="col-md alert alert-warning">
      Usan la clase <code>col-md</code>.
    </section>
    <section class="col-md alert alert-warning">
      El ancho se reparte equitativamente cuando no están apiladas.
    </section>
  </article>
  <article class="row">
    <section class="col-lg alert alert-success">
      Estas columnas se apilan solo cuando el ancho es grande: <strong>menor que 992px</strong>.
    </section>
    <section class="col-lg alert alert-success">
      Usan la clase <code>col-lg</code>.
    </section>
    <section class="col-lg alert alert-success">
      El ancho se reparte equitativamente cuando no están apiladas.
    </section>
  </article>
</main>
</body>
section { font-size: 75%; border-radius: 0 !important; margin-bottom: 0 !important; }

❓ Ejercicio: Pulsa en "Edit on Codepen" y modifica el ancho de la ventana para comprobar el comportamiento. Modifica el HTML para que una de ellos se mantenga apilado en pantallas xl o xxl.

Alineación

Para que las columnas tengan su ancho igual a lo que ocupa su contenido se usa col-{pantalla}-auto. Para que estén centradas horizontalmente se añade la clase justify-content-center en la fila row.

❓ Ejercicio: Modifica las columnas amarillas anteriores para que su ancho se ajuste a su contenido y estén centradas.