CSS: Alinear elementos en bootstrap4 by mialtoweb.es
fuente: http://mialtoweb.es/alinear-elementos-en-bootstrap4/
Gran artículo con unos cuantos ejemplos de utilizacion basica de maquetacion con bootstrap, os dejo un pequeño extracto que me ha servido de gran ayuda
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.
|
1
2
3
4
5
6
7
8
|
<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-[alienación]
|
1
2
3
4
5
6
7
8
9
10
11
|
<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> |
ver articulo completo de mialtoweb.es aqui: http://mialtoweb.es/alinear-elementos-en-bootstrap4/
