CSS: Alinear elementos en bootstrap4 by mialtoweb.es

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/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s