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:

Source code

<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:

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:

Source code

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:

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:

Source code

<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:

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:

Source code

<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:

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