En esta página:
Demo Github
En la versión 4 del popular framework para Frontends existen clases CSS que te pueden facilitar la maquetación de tu proyecto, solo es cuestión que las pongas en práctica y las uses hasta que las hagas parte de tu trabajo en maquetación y veras lo rápido que avanzarás, estas clases te ahorran muchas líneas de código CSS que sueles escribir para darle cierto aspecto a un elemento del proyecto. Veamos las clases en el siguiente tutorial.
Manipulación de Bordes
Con las siguientes clases puedes quitar y agregar bordes a un elemento de tu proyecto.
|
1 2 3 4 5 6 7 |
<span class="border-0"></span> <span class="border-top-0"></span> <span class="border-right-0"></span> <span class="border-bottom-0"></span> <span class="border-left-0"></span> |
Transformación de Palabras
Con las siguientes clases puedes transformar de manera rápida la primera letra de una palabra a letra capital, así mismo de mayúscula a minuscula y viceversa.
|
1 2 3 4 5 |
<p class="text-lowercase">Palabra Minúscula</p> <p class="text-uppercase">Palabra Mayúscula</p> <p class="text-capitalize">Palabra Capital</p> |
Ancho de un elemento
Las siguientes clases nos facilitan la gestion del ancho de un elemento en nuestro proyecto.
|
1 2 3 4 5 6 |
<div class="w-25 p-3" style="background-color: #eee;"> 25% </div> <div class="w-50 p-3" style="background-color: #eee;"> 50% de Ancho </div> <div class="w-75 p-3" style="background-color: #eee;"> 75% de Ancho </div> <div class="w-100 p-3" style="background-color: #eee;"> 100% de Ancho </div> |
Formato de Texto
Podemos darle los siguientes formatos de texto mediante las sguientes clases.
|
1 2 3 4 5 |
<p class="font-weight-bold">Texto en Negrita </p> <p class="font-weight-normal">Texto Normal </p> <p class="font-italic">Texto en Cursiva (Italic) </p> |
Manipulación de Bordes Redondeados
Imagina que tienes un cuadrado, pues tranquilamente le puedes redondear los bordes con estas sencillas clases.
|
1 2 3 4 5 6 7 8 |
<div class="rounded">Todos los bordes redondeados </div> <div class="rounded-top"> Redondeado en la parte superior </div> <div class="rounded-right"> Redondeado en la parte derecha </div> <div class="rounded-bottom"> Redondeado en la parte inferior </div> <div class="rounded-left"> Redondeado en la parte izquierda </div> <div class="rounded-circle"> Convertir a Círculo </div> |
Centrar Horizontalmente
Puedes centrar un elemento con esta sencilla clase.
|
1 2 3 4 5 |
<div class="mx-auto"> Contenido Centrado </div> |
Puedes ver lo fácil que es trabajar con estas clases que nos brinda Bootstrap 4, ojala se animen y agregen más en futuras versiones, por cierto existen otras clases en su documentacion oficial a las que les puedes echar un vistazo.
Siguenos en nuestras redes sociales, que disfrutes y nos vemos hasta un proximo articulo.