Alinear elementos en bootstrap 4 es muy sencillo, lo podemos hacer por medio de las clases que ya tiene implementadas.

Para aprender a usarlas, vamos a ir viendo una serie de ejemplos.

Empezaremos alineando a la izquierda y a la derecha con las clases, float-left y float-right

<div class="row">
	<div class="col">
		<span class="float-left">Izq</span>
		<span class="float-right">Der</span>
	</div>
</div>

Supongamos entonces que estamos trabajando con un grid en el que no queremos que los elementos alineados se lleguen a pisar unos a otros, para ello podemos utilizar la clase clearfix en el en envoltorio para que este contenido no se pise.

<div class="row">
	<div class="col clearfix">
		<span class="float-left">Izq</span>
		<span class="float-right">Der</span>
	</div>
	<div class="col clearfix">
		<span class="float-left">Izq</span>
		<span class="float-right">Der</span>
	</div>
</div>

También podemos hacer que cambie la alineación de  de los  elementos segun el tamaño de pantalla por medio de float-[tamaño]-[alineación], pero para ello debemos de decirle a la clase que envuelve que disponga los elementos en bloque con d-block.

<div class="row d-block">
	<div class="float-md-right">Hola Grid!</div>
</div>

Para alinear en el en centro, tan solo hay que usar la clase mx-auto

<div class="row">
	<div class="mx-auto">En el centro</div>
</div>

justfy-content-[alineación] nos ayuda a colocar las cajas si por ejemplo no ocupan toda fila a distribuirlas como necesitemos, dejando el hueco donde necesitemos.

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

En bootstrap 4 también podemos alinear elementos de forma vertical por medio de las clases align-items-[alineación] que nos permite ir alineando las filas según nos interese.

<div class="row align-items-center" style="height:300px; background: aquamarine">
	<div class="col-4">
		<p>Texto 1</p>		
	</div>
	<div class="col-4">
		<p>Texto 2</p>		
	</div>
</div>

Pero aún hay mas, ya que se puede alinear dentro de cada caja el contenido de forma vertical utilizando la clase align-self-[alineación]

<div class="row align-items-center" style="height:300px; background: aquamarine">
	<div class="col-4 align-self-start">
		<p>Texto 1</p>		
	</div>
	<div class="col-4 align-self-center">
		<p>Texto 2</p>		
	</div>
	<div class="col-4 align-self-end">
		<p>Texto 2</p>		
	</div>
</div>

Se pueden fijar contenidos en las web ya sea arriba (fixed-top), o abajo (fixed-bottom), que es algo que puede resultar muy interesante a la hora de maquetar en nuestras aplicaciones y webs.

<div class="fixed-bottom">
	contenido
</div>

Lista de clases para alinear:

• float-left; alinea a la izquierda
• float-right: alinea a la derecha
• clearfix: evita que el contenido se pise en las alineaciones
• floar-[tamaño]-[alineación]: hace que los elementos cambien de alineación, según nos interese en cada tamaño de pantalla.
• mx-auto: para alinear elementos en el centro
• justify-content-start: alinea el contenido horizontalmente a la izquierda
• justify-content-center: alinea el contenido al centro
• justify-content-right: alinea el contenido a la derecha
• justify-content-between: alinea el contenido dejando espacios en blanco entre las columnas
• justify-content-around: es igual que between, pero deja espacio también al principio y al final
• align-items-center: alinea los elementos de forma vertical al centro del contenedor
• align-items-start: alinea los elementos de forma vertical arriba del contenedor(por defecto)
• align-items-end: alinea los elementos de forma vertical abajo del contenedor
• align-self-start: alinea el elemento en si mismo de forma vertical arriba
• align-self-center: alinea el elemento en si mismo de forma vertical centrado
• align-self-end: alinea el elemento en si mismo de forma vertical abajo
• fixed-top: deja fijo el contenido arriba del navegador
• fixed-bottom: deja fijo el contenido abajo del navegador