Insignias de Bootstrap5 (Badges)
Las insignias (Badges) se utilizan principalmente para resaltar elementos nuevos o no leídos. Para usar insignias, solo necesita agregar la.badgeclase de color con un significado específico (por ejemplo,.bg-secondary) al<span>elemento. Las insignias pueden variar según el tamaño del elemento padre:
Ejemplo
<h1>Título de prueba<span class="badge bg-secondary">New</span></h1>
<h2>Título de prueba<span class="badge bg-secondary">New</span></h2>
<h3>Título de prueba<span class="badge bg-secondary">New</span></h3>
<h4>Título de prueba<span class="badge bg-secondary">New</span></h4>
<h5>Título de prueba<span class="badge bg-secondary">New</span></h5>
<h6>Título de prueba<span class="badge bg-secondary">New</span></h6>
Pruébalo »
Insignias de varios tipos de color
A continuación se enumeran todos los tipos de color de insignias:
Ejemplo
<span class="badge bg-primary">Principal</span>
<span class="badge bg-secondary">Secundario</span>
<span class="badge bg-success">Éxito</span>
<span class="badge bg-danger">Peligro</span>
<span class="badge bg-warning">Advertencia</span>
<span class="badge bg-info">Información</span>
<span class="badge bg-light">Claro</span>
<span class="badge bg-dark">Oscuro</span>
Pruébalo »
Insignias en forma de píldora
Use.rounded-pillla clase para configurar insignias en forma de píldora:
Ejemplo
<span class="badge rounded-pill bg-primary">Principal</span>
<span class="badge rounded-pill bg-success">Éxito</span>
<span class="badge rounded-pill bg-info">Información</span>
<span class="badge rounded-pill bg-warning">Advertencia</span>
<span class="badge rounded-pill bg-danger">Peligro</span>
Pruébalo »
Insignias dentro de elementos
El siguiente ejemplo inserta insignias dentro de un botón:
Ejemplo
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-light">4</span>
</button>
Pruébalo »