Como alinear elementos y cajas con Bootstrap 4 2019

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:

  •     float-left; alinea a la izquierda
  •     float-right: alinea a la derecha
  •     clearfix: evita que el contenido se pise en las alienaciones
  •     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 alienar elementos en el centro
  •     justify-content-start: alinea el contenido horizontalmente a la izquierda
  • justify-content-right: alinea el contenido a la derecha
  • justify-content-between: aliena 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    justify-content-center: alinea el contenido al centro

IMPORTANTE:

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.

  • d-flex: esto hace es crear un contenedor de flexbox y transformar elementos secundarios directos en elementos flexibles.
  • flex-column: Esto Establece  la dirección de los elementos flexibles en un contenedor flexible con utilidades de dirección, osea esto establece la direccion de columna(vertical).
  • justify-content-center: Así establecemos que el elemento flexible se posicione al centro en vertical.

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

Tu dirección de correo electrónico no será publicada.