Utilidades avanzadas

Bootstrap
Bootstrap
Actualizado: 14/02/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Completa Bootstrap y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración