Utilidades CSS en Bootstrap 5

Las utilidades CSS de Bootstrap 5 son clases predefinidas que facilitan el estilizado rápido y eficiente de elementos sin necesidad de escribir CSS personalizado. Estas utilidades abarcan una amplia gama de configuraciones comunes como colores, tipografía, espaciados, visibilidad, y más, permitiendo un diseño consistente y profesional.

1. Colores y fondos

Bootstrap 5 proporciona una paleta de colores y clases para aplicarlos tanto a texto como a fondos de manera rápida.

Colores de texto

Utiliza las clases de colores de texto para aplicar colores predefinidos a elementos de texto.

Ejemplo:

<p class="text-primary">Este texto es azul.</p>
<p class="text-danger">Este texto es rojo.</p>

Colores de fondo

Las clases de fondo aplican colores al fondo de los elementos.

Ejemplo:

<div class="bg-warning text-white p-3">
  Fondo amarillo con texto blanco.
</div>

2. Tipografía y alineación de texto

Bootstrap facilita el manejo de tipografía y alineación mediante utilidades específicas.

a) Tamaño y peso del texto

• fs-1 a fs-6: Define el tamaño del texto (de mayor a menor).
• fw-bold: Texto en negrita.
• fw-normal: Peso normal.
• fw-light: Texto con peso ligero.

Ejemplo:

<p class="fs-1 fw-bold">Texto grande y en negrita.</p>
<p class="fs-4 fw-light">Texto más pequeño y ligero.</p>

b) Alineación del texto

• text-start: Alineación a la izquierda (por defecto).
• text-center: Alineación centrada.
• text-end: Alineación a la derecha.

Ejemplo:

<p class="text-center">Este texto está centrado.</p>

c) Transformación del texto

• text-uppercase: Convierte a mayúsculas.
• text-lowercase: Convierte a minúsculas.
• text-capitalize: Capitaliza la primera letra de cada palabra.

Ejemplo:

<p class="text-uppercase">Texto en mayúsculas.</p>

3. Espaciados: márgenes y padding

Bootstrap utiliza una sintaxis consistente para manejar márgenes y rellenos (padding).

a) Clases de espaciado

La sintaxis básica es m (margen) o p (padding), seguido de un modificador:

• t: Superior (top).
• b: Inferior (bottom).
• s: Izquierda (start).
• e: Derecha (end).
• x: Horizontal (left + right).
• y: Vertical (top + bottom).
• Sin modificador: Aplica a todos los lados.

El valor del espaciado va de 0 a 5, donde 0 elimina el espaciado y 5 aplica el máximo espaciado.

Ejemplo:

<div class="p-3 m-2 bg-light">
  Relleno de 3 y margen de 2.
</div>
<div class="mt-4 bg-secondary text-white p-2">
  Margen superior de 4.
</div>

b) Eliminación de márgenes y padding

• m-0: Quita todos los márgenes.
• p-0: Quita todo el relleno.

4. Visibilidad y z-index

a) Clases de visibilidad

• d-none: Oculta un elemento.
• d-block: Muestra un elemento como bloque.
• d-inline: Muestra un elemento en línea.
• d-inline-block: Muestra un elemento en línea como bloque.

Visibilidad condicional con breakpoints

Las clases pueden usarse junto con breakpoints para mostrar/ocultar elementos según el tamaño de la pantalla.

• d-md-none: Oculta el elemento en dispositivos medianos y mayores.
• d-lg-block: Muestra el elemento solo en dispositivos grandes y mayores.

Ejemplo:

<div class="d-none d-sm-block">
  Visible solo en pantallas pequeñas y mayores.
</div>

b) Control del z-index

El z-index controla la superposición de los elementos:

• position-relative: Necesaria para aplicar z-index.
• z-index-0: Coloca el elemento en la capa base.
• z-index-1 a z-index-5: Incrementa la superposición.

Ejemplo:

<div class="position-relative z-index-1 bg-light p-3">
  Este elemento está en la capa superior.
</div>

Conclusión

Las utilidades CSS de Bootstrap 5 son herramientas versátiles que permiten estilizar rápidamente elementos y ajustar diseños para cualquier proyecto. Su flexibilidad y amplia variedad de opciones convierten a Bootstrap en un marco esencial para el diseño moderno y eficiente. Con práctica, dominarás estas utilidades y podrás crear interfaces atractivas y bien organizadas.