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árgenesp
para paddingt
,b
,s
,e
para top, bottom, start (izquierda) y end (derecha), respectivamente0-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.
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