Cómo construir rápidamente diseños adaptables con las utilidades Flexbox de Bootstrap 4
Spanish (Español) translation by steven (you can also view the original English article)
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 4Esto es Bootstrap 4Adi Purdila
- FlexboxUna guía completa para la alineación de FlexboxAnna Monus
- FlexboxUna guía completa para ordenar y reordenar FlexboxAnna 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:
Pantalla | Tamaño de la ventana gráfica | Prefijo de clase |
---|---|---|
Extra Pequeño | < 576px | .col-* |
Pequeño | ≥ 576px | .col-sm-* |
Medio | ≥ 768px | .col-md-* |
Grande | ≥ 992px | .col-lg-* |
Extra grande | ≥ 1200px | .col-xl-* |
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
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post