Cómo construir rápidamente diseños adaptables con las utilidades Flexbox de Bootstrap 4

En este tutorial, te mostraré cómo construir rápidamente diseños adaptables con las utilidades Flexbox de Bootstrap 4. Para comprender mejor estas utilidades, examinaremos cuatro ejemplos diferentes.

Nota: este tutorial asume que estás familiarizado con Bootstrap 4 y con Flexbox. Echa un vistazo a estos cursos para avanzar en la dirección correcta.

• 
  Bootstrap 4
  Esto es Bootstrap 4
  Adi Purdila
• 
  Flexbox
  Una guía completa para la alineación de Flexbox
  Anna Monus
• 
  Flexbox
  Una guía completa para ordenar y reordenar Flexbox
  Anna Monus

Presentamos los puntos de interrupción adaptables de Bootstrap 4

Antes de ver nuestros ejemplos, echemos un vistazo a las media queries de Bootstrap. El framework define cinco puntos de interrupción basados en píxeles para columnas de cuadrícula, que se muestran en la siguiente tabla:

Ejemplo #1

¡Manos a la obra! En el primer ejemplo, nuestro objetivo es centrar horizontal y verticalmente el contenido dentro de una sección, así:

1. El marcado

Aquí está nuestro HTML:

<section class="d-flex text-center">
  <div class="container d-flex justify-content-center">
    <div class="row align-items-center justify-content-center">
      <div class="col-10">...</div>
    </div>
  </div>
</section>

Ten en cuenta que hemos utilizado varias clases relacionadas con Flexbox de Bootstrap. Por ejemplo, denotamos que el elemento section es un contenedor flexible dándole la clase d-flex. Además, para centrar el contenido del elemento .row (que por defecto es un contenedor flexible) en ambas direcciones, utilizamos las clases align-items-center y justify-content-center.

2. El CSS

Aquí está el CSS asociado:

section {
  min-height: 70vh;
  background-color: rgba(86,61,124,.15);
}

Y la demostración en Codepen:

Ejemplo #2

En el segundo ejemplo, nuestro objetivo es construir el siguiente diseño con bloques que contengan texto alineado en la parte inferior y superior de cada uno.

Este es el diseño deseado para pantallas grandes (cuando el ancho de la vista ≥ 1200px). Consulta la demostración y cambia el tamaño de la ventana del navegador para ver cómo cambia el diseño en tamaños de pantalla más estrechos.

1. El HTML

Comenzamos con este típico marcado de Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-8">...</div>
    <div class="col-12 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4">...</div>
  </div>
</div>

Inicialmente nos centraremos en el marcado que establece el diseño para el contenido de las columnas. Dentro de cada una de nuestras columnas, agregamos el siguiente marcado:

<a class="d-flex flex-column align-items-end justify-content-between p-3 block" href="">
  <div class="label">...</div>
  <div class="description">...</div>
</a>

Nuevamente, en el código anterior, hemos utilizado una serie de clases relacionadas con Flexbox integradas de Bootstrap:

• d-flex: para crear un contenedor flexible, transformando elementos hijos directos en elementos flexibles
• flex-column: para establecer una dirección vertical
• align-items-end: para alinear elementos flexibles al final del eje x (en este caso debido a la dirección de la columna)
• justify-content-between: para justificar los elementos con el mismo espacio entre ellos.

2. El CSS

El CSS necesario para nuestro diseño:

body {
  margin-top: 30px;
}

a,
a:hover {
  color: #212529;
}

a:hover {
  text-decoration: none;
}

.block {
  height: 350px;
  background: rgba(86,61,124,.15);
  margin-bottom: 30px;
}

.label {
  font-size: .85rem;
  font-weight: bold;
}

La demostración en Codepen:

Bono

Solo para practicar, tomemos un minuto y pensemos en dos formas alternativas de flexbox para lograr el mismo diseño para el contenido de las columnas.

Primero, eliminamos la clase justify-content-between del enlace y agregamos la clase mb-auto al elemento con la clase .label. Alternativamente, podríamos haber modificado el elemento .description dándole la clase mt-auto.

El HTML actualizado:

<!-- old markup
<a class="d-flex flex-column align-items-end justify-content-between p-3 block" href="">
  <div class="label">...</div>
  <div class="description">...</div>
</a>-->

<a class="d-flex flex-column align-items-end p-3 block" href="">
  <div class="label mb-auto">...</div>
  <div class="description">...</div>
</a>

Ahora, revisemos nuevamente la demostración:

El resultado se ve igual, ¿verdad?

Para un segundo intento, podríamos reemplazar algunas líneas de nuestro marcado con este nuevo código:

<!-- old markup
<a class="d-flex flex-column align-items-end justify-content-end p-3 block" href="">
  <div class="label">...</div>
  <div class="description">...</div>
</a>-->

<a class="d-flex flex-wrap justify-content-end p-3 block" href="">
  <div class="label w-100 text-right">...</div>
  <div class="description align-self-end">...</div>
</a>

En este punto, verificamos la demostración actualizada:

¡Una vez más, el diseño generado es exactamente lo que queremos!

Ejemplo #3

En el tercer ejemplo, comenzaremos con un diseño similar al ejemplo anterior. Nuestro objetivo esta vez es manipular el orden de las columnas tercera y cuarta según el tamaño de la ventana gráfica.

Cuando la ventana gráfica tiene al menos 1200px de ancho, el orden de las columnas debe ser el siguiente:

En cualquier otro caso, el orden de las columnas cambia; el tercer elemento debe venir después del cuarto:

1. El HTML

El marcado que define el diseño de la cuadrícula:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-8">...</div>
    <div class="col-12 col-md-6 col-xl-4 order-4 order-xl-3">...</div>
    <div class="col-12 col-xl-4 order-3 order-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4 order-5">...</div>
  </div>
</div>

Observa las clases order-* que aparecen en las columnas tercera, cuarta y quinta.

Ten en cuenta que incluso si queremos cambiar el orden de la tercera y cuarta columna, también tenemos que especificar el orden de la quinta columna. Si no hacemos esto, la última columna siempre seguirá a la segunda.

Dentro de cada una de las columnas, centramos el contenido en ambas direcciones con las siguientes clases de utilidad familiares:

<div class="d-flex align-items-center justify-content-center h2 block">
 <!-- centered content here --> 
</div>

2. El CSS

Aquí está el CSS asociado:

body {
  margin-top: 30px;
}

.block {
  height: 250px;
  color: #212529;
  background: rgba(86,61,124,.15);
  margin-bottom: 30px;
}

Y, por supuesto, la demostración de Codepen:

Ejemplo #4

En el último ejemplo, nuestro objetivo es construir un encabezado adaptable.

Cuando la ventana del navegador tiene al menos 768px de ancho, el encabezado debería verse así:

En pantallas más pequeñas, su diseño cambia de la siguiente manera:

Para ver el menú, hacemos clic en el botón ubicado en la esquina derecha.

1. El HTML

Nuestro HTML se ve así:

<nav class="nav-top p-3">
  <div class="container-fluid d-flex align-items-center no-padding">
    <h2 class="logo">LOGO</h2>
    <ul class="d-flex list-unstyled list list-top">...</ul>
    <ul class="d-flex list-unstyled list ml-auto">...</ul>
    <button class="toggle-menu ml-2 d-md-none" aria-label="Responsive Navigation Menu">
      <img src="IMG_SRC" alt="">
    </button>
  </div>
</nav>

En este caso, usamos una combinación de clases personalizadas junto con las clases de Bootstrap.

Gracias a la clase ml-auto, movemos la segunda lista a la esquina derecha del contenedor principal.

2. El CSS

A continuación se muestra una parte del CSS requerido:

.nav-top {
  background: rgba(86, 61, 124, 0.15);
}

.container-fluid {
  max-width: 1200px;
}

.list-top {
  margin-left: 50px;
}

.list li:not(:last-child) {
  margin-right: 15px;
}

.list li a {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.2s;
}

.list li a:hover {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .list-top {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    transform: translateX(-100%);
    margin-left: 0;
    padding: 1rem;
    transition: transform 0.3s;
  }

  .nav-top.is-active .list-top {
    transform: none;
  }
  
  .list-top li {
    flex-grow: 1;
  }
}

3. El JavaScript

Aquí está el JavaScript responsable de alternar la visibilidad del menú móvil:

const toggleMenu = document.querySelector(".toggle-menu");
const navTop = document.querySelector(".nav-top");

toggleMenu.addEventListener("click", () => {
  navTop.classList.toggle("is-active");
});

Y la demo final:

Conclusión

En este tutorial en profundidad, cubrimos cuatro ejemplos del mundo real que aprovechan las utilidades flexibles de Bootstrap 4. Espero que hayas disfrutado lo que construimos aquí y que te hayan motivado a aplicar lo que has aprendido en tus próximos proyectos de Bootstrap.

Como siempre, si tienes alguna pregunta, házmelo saber en los comentarios a continuación.

Enlaces útiles

• Utilidades Flexbox adaptables