Clases nativas que te harán más productiva(o) en Bootstrap 4

3 minuto(s)

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.


<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.


<p class="text-lowercase">Palabra Minúscula</p>
<p class="text-uppercase">Palabra Mayúscula</p>
<p class="text-capitalize">Palabra Capital</p>

<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.


<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>

<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.


<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>

<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.


<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>

<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.


<div class="mx-auto">
   Contenido Centrado
</div>

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.