Medallas Bootstrap 5

Insignias

Las insignias (Badges) se utilizan para agregar información adicional al contenido:

en <span> se utiliza en el elemento .badge clases y clases de contexto (como .bg-secondaryPara crear una insignia rectangular. Note que la insignia se escalará para coincidir con el tamaño del elemento padre (si lo hay):

Ejemplo

<h1>Example heading <span class="badge bg-secondary">Nuevo</span></h1>
<h2>Example heading <span class="badge bg-secondary">Nuevo</span></h2>
<h3>Example heading <span class="badge bg-secondary">Nuevo</span></h3>
<h4>Example heading <span class="badge bg-secondary">Nuevo</span></h4>
<h5>Example heading <span class="badge bg-secondary">Nuevo</span></h5>
<h6>Example heading <span class="badge bg-secondary">Nuevo</span></h6>

Prueba personalmente

Insignia de contexto

Utilice cualquier clase de contexto (.bg-*Para cambiar el color de la insignia:

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>

Prueba personalmente

Insignia cápsula

Uso .rounded-pill Las clases hacen que las insignias sean más redondas:

Ejemplo

<span class="badge rounded-pill bg-primary">Principal</span>
<span class="badge rounded-pill bg-secondary">Secundario</span>
<span class="badge rounded-pill bg-success">Éxito</span>
<span class="badge rounded-pill bg-danger">Peligro</span>
<span class="badge rounded-pill bg-warning">Advertencia</span>
<span class="badge rounded-pill bg-info">Información</span>
<span class="badge rounded-pill bg-light">Claro</span>
<span class="badge rounded-pill bg-dark">Oscuro</span>

Prueba personalmente

Insignia dentro de un elemento

Ejemplo de uso de insignias dentro de un botón:

Ejemplo

<button type="button" class="btn btn-primary">
  Mensaje <span class="badge bg-danger">4</span>
</button>

Prueba personalmente