Etiqueta: maquetacion

Height 100% métodos alternativos con CSS3 by @espaibarcelona

por coudlain, posted in css, html

fuente: https://www.espai.es/blog/2017/02/height-100-css/

Seguramente ya sabréis que para determinar el “tamaño” de un elemento en css podemos utilizar unidades como los píxeles, puntos, porcentajes o incluso em. Pero quizá no hayáis oído hablar de las unidades vh y vw.  Una unidad vh (viewport height) equivale a un 1% de la altura del viewport (el total de la pantalla del dispositivo que muestre nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%. Como os habréis imaginado, la unidad vw es el equivalente para el ancho.

Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:

1
2
3
4
5
.fullHeight {
height: 100vh;
}

Leer artículo completo en ESPAI.ES

CSS: Alinear elementos en bootstrap4 by mialtoweb.es

por coudlain, posted in css

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/