¿Qué son los Badges?
Los badges son pequeños elementos visuales que se utilizan para mostrar información adicional, como contadores o etiquetas, al lado de otros elementos como títulos, botones, o ítems de una lista. Son útiles para destacar notificaciones, etiquetas de estado, y otras informaciones breves.
Paso 1: Consultar la Documentación de Bootstrap
Primero, vamos a la documentación oficial de Bootstrap en getbootstrap.com. En el apartado de componentes, encontrarás la sección de badges. Aquí, Bootstrap nos proporciona ejemplos y el código necesario para implementarlos.
Paso 2: Crear un Badge Básico
Vamos a empezar con un badge básico. Puedes crear un badge utilizando la etiqueta <span> y la clase badge. Además, puedes aplicar una clase de color para definir su estilo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badges en Bootstrap 5</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<h1>Ejemplo de Badge <span class="badge bg-primary">Nuevo</span></h1>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>Paso 3: Badges en Botones
Los badges también se pueden utilizar dentro de botones para indicar, por ejemplo, el número de notificaciones:
<button type="button" class="btn btn-primary">
Notificaciones <span class="badge bg-secondary">4</span>
</button>Paso 4: Badges Posicionados
Podemos posicionar un badge en la esquina superior derecha de un elemento usando utilidades de posicionamiento de Bootstrap:
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+ <span class="visually-hidden">unread messages</span>
</span>
</button>Explicación:
position-relative: Se aplica al contenedor para establecer un contexto de posicionamiento.position-absolute: Posiciona el badge absolutamente dentro del contenedor.top-0,start-100: Colocan el badge en la esquina superior derecha.translate-middle: Ajusta la posición del badge para que quede centrado en el borde.
Paso 5: Badges Redondeados
Para crear badges redondeados, utilizamos la clase rounded-pill:
<span class="badge rounded-pill bg-warning text-dark">Warning</span>Ejemplo Completo
Aquí tienes un ejemplo completo con diferentes usos de badges:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badges en Bootstrap 5</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<h1>Ejemplo de Badge <span class="badge bg-primary">Nuevo</span></h1>
<button type="button" class="btn btn-primary">
Notificaciones <span class="badge bg-secondary">4</span>
</button>
<button type="button" class="btn btn-primary position-relative mt-3">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+ <span class="visually-hidden">unread messages</span>
</span>
</button>
<span class="badge rounded-pill bg-warning text-dark mt-3">Warning</span>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>Conclusión
¡Y eso es todo! Hemos aprendido cómo crear y personalizar badges en Bootstrap 5, incluyendo cómo integrarlos en botones y cómo posicionarlos adecuadamente.
