Bootstrap 5 ofrece una serie de componentes básicos que facilitan la creación de interfaces de usuario dinámicas, elegantes y funcionales. Estos componentes están diseñados para integrarse de manera sencilla en proyectos web. A continuación, exploraremos cuatro de los más utilizados: botones, badges, breadcrumbs y alerts, junto con ejemplos detallados de su uso.
Ver índice del contenido
1. Botones
Los botones son elementos fundamentales en cualquier diseño web, usados para acciones como enviar formularios, interactuar con usuarios o navegar por la página. Bootstrap 5 proporciona una amplia variedad de estilos y tamaños de botones predefinidos.
Clases de Botones
Bootstrap ofrece las siguientes clases para estilizar botones:
Clase | Descripción |
---|---|
.btn-primary | Botón principal (azul por defecto). |
.btn-secondary | Botón secundario (gris). |
.btn-success | Botón para éxito (verde). |
.btn-danger | Botón para errores (rojo). |
.btn-warning | Botón para advertencias (amarillo). |
.btn-info | Botón para información (celeste). |
.btn-light | Botón con fondo claro. |
.btn-dark | Botón con fondo oscuro. |
.btn-link | Botón estilo enlace de texto. |
Tamaños de Botones
- Botones Grandes:
.btn-lg
- Botones Pequeños:
.btn-sm
Ejemplo Práctico
<div class="d-grid gap-2"> <button type="button" class="btn btn-primary btn-lg">Botón Primario</button> <button type="button" class="btn btn-danger btn-sm">Botón Pequeño</button> <button type="button" class="btn btn-link">Botón Enlace</button> </div>
Botones Deshabilitados
Puedes deshabilitar un botón con el atributo disabled
o la clase .disabled
.
<button type="button" class="btn btn-secondary" disabled>Deshabilitado</button> <a href="#" class="btn btn-light disabled" tabindex="-1" aria-disabled="true">Enlace Deshabilitado</a>
2. Badges (Insignias)
Los badges son pequeñas etiquetas que resaltan información adicional, como notificaciones, conteos o estados.
Clases de Badges
Clase | Descripción |
---|---|
.badge-primary | Fondo azul. |
.badge-secondary | Fondo gris. |
.badge-success | Fondo verde. |
.badge-danger | Fondo rojo. |
.badge-warning | Fondo amarillo. |
.badge-info | Fondo celeste. |
.badge-light | Fondo claro. |
.badge-dark | Fondo oscuro. |
Ejemplo Básico
<h1>Tareas <span class="badge bg-primary">3</span></h1> <h2>Mensajes <span class="badge bg-danger">5</span></h2>
Badges como Enlaces
Los badges pueden funcionar como enlaces añadiendo la clase .link-*
.
<a href="#" class="badge bg-info text-decoration-none">Enlace Badge</a>
3. Breadcrumbs (Migajas de Pan)
Los breadcrumbs son indicadores de navegación que muestran la ubicación del usuario en la jerarquía de la página.
Estructura Básica
Se implementan con una lista ordenada <ol>
envuelta en un <nav>
y se estilizan con la clase .breadcrumb
.
<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Inicio</a></li> <li class="breadcrumb-item"><a href="#">Sección</a></li> <li class="breadcrumb-item active" aria-current="page">Página Actual</li> </ol> </nav>
Separadores Personalizados
Por defecto, el separador es /
, pero puedes personalizarlo con CSS.
<style> .breadcrumb-item + .breadcrumb-item::before { content: ">"; } </style>
4. Alerts (Alertas)
Las alertas son mensajes que destacan información importante o de contexto, como advertencias, errores o éxitos.
Clases de Alertas
Clase | Uso |
---|---|
.alert-primary | Información general. |
.alert-secondary | Información secundaria. |
.alert-success | Mensajes de éxito. |
.alert-danger | Mensajes de error o advertencia grave. |
.alert-warning | Advertencias. |
.alert-info | Mensajes informativos. |
.alert-light | Fondo claro con mensaje. |
.alert-dark | Fondo oscuro con mensaje claro. |
Ejemplo de Alertas
<div class="alert alert-success" role="alert"> ¡Operación realizada con éxito! </div> <div class="alert alert-danger" role="alert"> Ha ocurrido un error inesperado. </div> <div class="alert alert-warning" role="alert"> Atención: Revise los datos ingresados. </div>
Alertas Descartables
Las alertas pueden incluir un botón para cerrarlas con la clase .alert-dismissible
y el atributo data-bs-dismiss
.
<div class="alert alert-info alert-dismissible fade show" role="alert"> Este es un mensaje importante. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>
Conclusión
Los componentes básicos de Bootstrap 5 ofrecen soluciones rápidas y consistentes para mejorar la experiencia del usuario en sitios web. Los botones, badges, breadcrumbs y alerts son esenciales para crear interfaces atractivas y funcionales, con opciones de personalización que se adaptan a cualquier proyecto. Experimenta con estos componentes para dominar su implementación y mejorar la calidad de tus diseños.