Author : Jhon
Publicado : 16 diciembre, 2019
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
|
1
2
3
4
5
6
|
<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.
|
1
2
3
4
5
6
7
8
9
10
|
<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]-[alienación], pero para ello debemos de decirle a la clase que envuelve que disponga los elementos en bloque con d-block.
|
1
2
3
|
<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
|
1
2
3
|
<div class="row"> <div class="mx-auto">En el centro</div></div> |
justfy-content-[alienación] nos ayuda a colocar las cajas si por ejemplo no ocupan toda fila a distribuirlas como necesitemos, dejando el hueco donde necesitemos.
|
1
2
3
4
5
6
7
8
|
<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.
Esta es una exelente forma de alinear verticalmente todos los div .col que tenemos dentro de un row, es importante que le demos una altura al row con un estilo en linea.
|
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 más, 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> |
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.
|
1
2
3
|
<div class="fixed-bottom"> contenido</div> |
Lista de clases para alinear:
Alineacion vertical
Cuando tenemos una fila, osea un <div class=»row»></div>; dentro otro contenedor <div> que supongamos tiene una altura de 400px y dentro de este por ejemplo un <h1> o un <p>; que queremos alinear al medio debemos de hacer lo siguiente:
<div class="row"> <div class="caja d-flex flex-column justify-content-center"> <h1>Paginas</h1> </div> </div>
Aplicamos las clases de bootstrap 4.
En css podemos hacer lo siguiente:
Apuntamos al objeto, osea la clase css del contenedor que es (caja) y escribimos:
.caja{
display: flex;
flex-direction: column;
justify-content: center;
}
Deja una respuesta