Alinear columnas verticalmente con Bootstrap 4

En este artículo vas a descubrir como alinear columnas verticalmente utilizando Bootstrap 4 y Flexbox. Esto es una de las nuevas e interesantes características que trae Bootstrap 4 y que es uno de los principales detalles que lo hacen más atractivo para que sea utilizado por los desarrolladores de aplicaciones web.

La verdad es que esto es increible. Antes no lo podíamos hacer. La inclusión de Flexbox cambia muchísimo la forma en la que podemos diseñar sitios web.

Con Flexbox, para centrar columnas verticalmente en una fila es posible hacerlo en la parte superior, en el centro o en la parte inferior.

La verdad es que está bastante genial.

En este artículo te voy a estar enseñando como puedes centrar verticalmente tus columnas para que las acomodes como tu quieras.

Para alinear columnas dentro de una fila, Bootstrap lo ha puesto muy fácil agregando Flexbox a su hoja de estilos.

En el contenedor que contiene la fila tan solo debes agregarle una nueva clase para beneficiarte de las características de Flexbox.

En el ejemplo en funcionamiento voy a crear varias filas con 3 columnas que alinearé verticalmente de 3 formas diferentes. En cada fila hay 3 elementos que ocupan toda la fila.

En Bootstrap, por defecto, la altura de cada columna se ajusta a la altura de la fila pero, con la introducción de Flexbox, ahora puedes cambiar este comportamiento alineando las columnas en la parte superior, al centro o a la parte inferior de la fila. Las columnas, en este caso, se muestran con la altura que necesitan.

Para conseguirlo tan solo tienes que agregar la clase necesaria al elemento padre o fila «row».

En el ejemplo en funcionamiento he definido una altura fija de 150px a la fila para que se vea mejor el efecto.

Alinear columnas verticalmente en la parte superior de la fila

Con .align-items-start puedes alinear las columnas en la parte superior de la fila.

Código de ejemplo:

<div class="row align-items-start">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2</div>
    <div class="col-4">Columna 3</div>
</div>

Resultado:

align-items-start

Alinear columnas verticalmente en el centro de la fila

Con .align-items-center puedes alinear las columnas en el centro de la fila.

Para mi gusto, este es el mejor tipo de alineado vertical o, al menos, el que considero que más te puede servir.

Código de ejemplo:

div class="row align-items-center">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2<br/>subtítulo</div>
    <div class="col-4">Columna 3</div>
</div>

Resultado:

align-items-center

Alinear columnas verticalmente en la parte inferior de la fila

Con .align-items-end puedes alinear las columnas en la parte inferior de la fila.

Código de ejemplo:

<div class="row align-items-end">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2</div>
    <div class="col-4">Columna 3</div>
</div>

Resultado:

align-items-end

Alinear columnas verticalmente de forma independiente

Con .align-self-start, .align-self-center y .align-self-end  puedes alinear las columnas de forma independiente en la fila en la parte superior, en el centro y en la parte inferior respectivamente.

Código de ejemplo:

<div class="row ">
    <div class="col-4 align-self-start">Columna 1</div>
    <div class="col-4 align-self-center">Columna 2</div>
    <div class="col-4 align-self-end">Columna 3</div>
</div>

Resultado:

align-self

Interesante, verdad?

Recuerda que es muy importante que estas clases las pongas en la fila o «row» y no en la columna «col», a excepción de este último caso que permite alinear cada columna de forma independiente.

Estas son las opciones que puedes tener para poder alinear elementos verticalmente con Bootstrap 4.

En versiones anteriores de Bootstrap estas definiciones no estaban y era un poco complicado realizar alineamientos de elementos de este tipo con Bootstrap.

La incorporación de Flexbox ha potenciado mucho las posibilidades de usar Bootstrap para el desarrollo de páginas web y merece la pena estudiarlo.

Esto te lo comento porque te puede sacar de un tormento!

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(4 votos, promedio: 5 de 5)
Comparte en las redes sociales

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre