Alinear elementos en bootstrap4
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
Hey! mi hermano! bendiciones! Muchas gracias, me ha servido tu información.
tio se te ha ido la mano con lo de alienar
ahora mismo no tengo muy claro que hacer con los si decirles que se coloquen o comerles la cabeza y que se crean que son o
😉
bueno recuerda por que viniste y que encontraste… por que no debes de olvidar que los dislexicos tambien somos persianas jajajaja