Alinear columnas horizontalmente con Bootstrap 4

En este artículo vas a descubrir como alinear columnas horizontalmente 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.

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é horizontalmente de 5 formas diferentes. En cada fila hay 2 elementos para que quede espacio libre para poder alinear las columnas en la fila.

Alinear columnas horizontalmente al inicio de la fila

Con .justify-content-start puedes alinear las columnas a la izquierda o inicio de la fila.

Código de ejemplo:

Source code

<div class="row justify-content-start">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2</div>
</div>

Resultado:

Alinear columnas horizontalmente en el centro de la fila

Con .justify-content-center puedes alinear las columnas en el centro de la fila.

Código de ejemplo:

Source code

<div class="row justify-content-center">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2</div>
</div>

Resultado:

Alinear columnas horizontalmente al final de la fila

Con .justify-content-end puedes alinear las columnas a la derecha o al final de la fila.

Código de ejemplo:

Source code

<div class="row justify-content-end">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2</div>
</div>

Resultado:

Alinear columnas horizontalmente dividendo el espacio restante con justify-content-around

Con .justify-content-around puedes alinear las columnas considerando o dividiendo el espacio restante entre todos los elementos de la fila.

Código de ejemplo:

Source code

<div class="row justify-content-around">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2</div>
</div>

Resultado:

Alinear columnas horizontalmente dividiendo el espacio restante con justify-content-between

Con .justify-content-between puedes alinear las columnas considerando o dividiendo el espacio restante entre todos los elementos de la fila pero no va a dejar espacio ni al inicio ni al final.

Código de ejemplo:

Source code

<div class="row justify-content-between">
    <div class="col-4">Columna 1</div>
    <div class="col-4">Columna 2</div>
</div>

Resultado:

Interesante, verdad?

Recuerda que es muy importante que estas clases las pongas en la fila o «row» y no en la columa «col». En este último caso, no funcionará.

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

En versiones anteriores de Bootstrap estas definiciones no estaban y era un poco complicado realizar alineamientos de elementos 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