Las insignias o badges en bootstrap son una forma de marcar cierto contenido en un texto.

En el caso que vamos a ver lo haremos sobre un h2, para ver las posibilidades que tenemos.

Para empezar dentro de un span, como siempre podemos utilizar el tipo de etiqueta que queramos, introducimos la clase badge, esta clase le dice a bootstrap que se trata de una insignia y marca el contenido de forma diferente.

<h2>Ejemplo de <span class="badge">badge</span></h2>

Pero podemos añadirle por ejemplo clores con los códigos de color de bootstrap añadiendo la clase badge-[color]

[htm<h2>Ejemplo de <span class=»badge badge-success»>badge</span></h2>l][/html]

Pero esto hace que las insignias parezcan botones y puede ser que queramos que parezcan mas redondas, para eso existe lo que boostrap llama píldoras que consiste en introducir la clase badge-pill

<h2>Ejemplo de <span class="badge badge-pill badge-success">badge</span></h2>

Ahora que sabemos como se utilizan los badges podemos usarlos dentro de otros elementos como el siguiente ejemplo que los introducimos dentro de un botón, utilizando lo que ya sabemos.

<button type="button" class="btn btn-danger">Mensajes nuevos <span class="badge badge-pill badge-light">2</span></button>

Todos estos ejemplos nos dan lo siguientes resultados:

Como podemos observar es muy muy fácil utilizar las insignias en bootstrap 4.