Bootstrap: Utilidades y helpers

Bootstrap CSS 5.3 ofrece una amplia gama de utilidades y helpers que facilitan el desarrollo web al proporcionar clases predefinidas que permiten aplicar estilos de manera rápida y eficiente. En este módulo, exploraremos algunas de las utilidades y helpers más útiles.

Utilidades de espaciado

Las utilidades de espaciado permiten ajustar márgenes y padding de elementos sin necesidad de escribir CSS adicional. Estas utilidades siguen una nomenclatura específica:

• m para márgenes
• p para padding
• t, b, s, e para top, bottom, start (izquierda) y end (derecha), respectivamente
• 0-5 para los niveles de espaciado (de 0 a 5)

Ejemplo de uso:

<div class="mt-3 mb-4 p-2">
Contenido con margen superior de 3, margen inferior de 4 y padding de 2.
</div>

Utilidades de tipografía

Bootstrap CSS 5.3 proporciona varias clases para ajustar rápidamente la tipografía:

• .text-start, .text-center, .text-end para la alineación del texto
• .fw-bold, .fw-normal, .fw-light para el peso de la fuente
• .fst-italic, .fst-normal para el estilo de la fuente

Ejemplo de uso:

<p class="text-center fw-bold fst-italic">
Texto centrado, en negrita e itálica.
</p>

Utilidades de visibilidad

Las utilidades de visibilidad permiten mostrar u ocultar elementos en función del tamaño de la pantalla:

• .d-none oculta el elemento en todas las pantallas
• .d-sm-block, .d-md-block, .d-lg-block, .d-xl-block para mostrar el elemento en pantallas pequeñas, medianas, grandes y extra grandes, respectivamente
• .d-sm-none, .d-md-none, .d-lg-none, .d-xl-none para ocultar el elemento en pantallas específicas

Ejemplo de uso:

<div class="d-none d-md-block">
Este contenido solo se muestra en pantallas medianas y más grandes.
</div>

Utilidades de color

Las utilidades de color permiten aplicar rápidamente colores de fondo y de texto:

• .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-white para los colores de fondo
• .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-white para los colores de texto

Ejemplo de uso:

<div class="bg-primary text-white p-3">
Caja con fondo azul y texto blanco.
</div>

Helpers de flexbox

Bootstrap CSS 5.3 incluye clases helper para trabajar con flexbox, facilitando la creación de layouts flexibles:

• .d-flex para activar el modo flexbox
• .justify-content-start, .justify-content-center, .justify-content-end, .justify-content-around, .justify-content-between para la alineación horizontal
• .align-items-start, .align-items-center, .align-items-end para la alineación vertical

Ejemplo de uso:

<div class="d-flex justify-content-between align-items-center">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
</div>

Helpers de display

Las utilidades de display permiten cambiar rápidamente la propiedad display de un elemento:

• .d-inline, .d-inline-block, .d-block, .d-grid, .d-table, .d-table-cell, .d-flex, .d-inline-flex

Ejemplo de uso:

<span class="d-inline-block p-2 bg-light">
Elemento en línea con display de bloque.
</span>

Estas utilidades y helpers de Bootstrap CSS 5.3 son esenciales para optimizar y simplificar el desarrollo web, permitiendo aplicar estilos de manera eficiente y consistente.