Alineacion de Texto

Texto Centrado

Utilizar la clase 'text-center'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus efficitur interdum. Quisque et ipsum scelerisque, auctor massa vitae, eleifend est. Quisque eleifend laoreet vestibulum. Vestibulum placerat, dui id hendrerit tempor, dolor arcu placerat nulla, sit amet lobortis tellus nunc sit amet sapien. Integer eget rhoncus magna, fermentum mattis urna. Sed scelerisque sem eu feugiat volutpat. Nullam tempor placerat urna, sit amet eleifend elit sagittis nec. Nulla condimentum blandit quam, ac efficitur felis.

<p class="text-center">...</p>

Texto a la Derecha

Utilizar la clase 'text-right'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus efficitur interdum. Quisque et ipsum scelerisque, auctor massa vitae, eleifend est. Quisque eleifend laoreet vestibulum. Vestibulum placerat, dui id hendrerit tempor, dolor arcu placerat nulla, sit amet lobortis tellus nunc sit amet sapien. Integer eget rhoncus magna, fermentum mattis urna. Sed scelerisque sem eu feugiat volutpat. Nullam tempor placerat urna, sit amet eleifend elit sagittis nec. Nulla condimentum blandit quam, ac efficitur felis.

<p class="text-right">...</p>

Alinear según viewport

En este caso podemos alinear el texto dependiendo de la resolución en que se muestra utilizando las clases 'text-(breakpoint)-center' o 'text-(breakpoint)-right'

En el siguiente ejemplo podemos ver que si la resolucion es mayor a 1200px nuestro texto esta alineado al centro. Si achicamos el browser hasta los 900px nuestro texo va a tener una alineación derecha y si seguimos achicando hasta llegar a los 480px la alineación va a ser izquierda.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus efficitur interdum. Quisque et ipsum scelerisque, auctor massa vitae, eleifend est. Quisque eleifend laoreet vestibulum. Vestibulum placerat, dui id hendrerit tempor, dolor arcu placerat nulla, sit amet lobortis tellus nunc sit amet sapien. Integer eget rhoncus magna, fermentum mattis urna. Sed scelerisque sem eu feugiat volutpat. Nullam tempor placerat urna, sit amet eleifend elit sagittis nec. Nulla condimentum blandit quam, ac efficitur felis.

<p class="text-sm-left text-md-right text-lg-center">...</p>

NOTA: Estas clases deben estar aplicadas de menor resolucion a mayor. Por ejemplo xs / sm / md / lg. Si se altera el orden dejara de funcionar.

dosLotos Grid v.1.1.1
Autor Carlos 'Ruso' Cucurullo
doslotos ©