Bootstrap 5 Medaille

Emblemen

Emblemen (Badges) worden gebruikt om extra informatie aan inhoud toe te voegen:

in <span> elementen te gebruiken .badge Klassen en contextklassen (zoals .bg-secondary) om rechthoekige emblemen te maken. Let op, de emblemen zullen schalen om te matchen met de grootte van het ouder element (indien aanwezig):

Voorbeeld

<h1>Voorbeeld titel <span class="badge bg-secondary">Nieuw</span></h1>
<h2>Voorbeeld titel <span class="badge bg-secondary">Nieuw</span></h2>
<h3>Voorbeeld titel <span class="badge bg-secondary">Nieuw</span></h3>
<h4>Voorbeeld titel <span class="badge bg-secondary">Nieuw</span></h4>
<h5>Voorbeeld titel <span class="badge bg-secondary">Nieuw</span></h5>
<h6>Voorbeeld titel <span class="badge bg-secondary">Nieuw</span></h6>

Probeer het zelf

Contextuele emblemen

Gebruik een willekeurige contextklasse (.bg-*) Verander de kleur van het embleem:

Voorbeeld

<span class="badge bg-primary">Primair</span>
<span class="badge bg-secondary">Secundair</span>
<span class="badge bg-success">Succes</span>
<span class="badge bg-danger">Gevaar</span>
<span class="badge bg-warning">Waarschuwing</span>
<span class="badge bg-info">Informatie</span>
<span class="badge bg-light">Licht</span>
<span class="badge bg-dark">Donker</span>

Probeer het zelf

Capsule badge

Gebruik .rounded-pill Klasse maakt badges ronder:

Voorbeeld

<span class="badge rounded-pill bg-primary">Hoofd</span>
<span class="badge rounded-pill bg-secondary">Secundair</span>
<span class="badge rounded-pill bg-success">Succes</span>
<span class="badge rounded-pill bg-danger">Gevaar</span>
<span class="badge rounded-pill bg-warning">Waarschuwing</span>
<span class="badge rounded-pill bg-info">Informatie</span>
<span class="badge rounded-pill bg-light">Licht</span>
<span class="badge rounded-pill bg-dark">Donker</span>

Probeer het zelf

Badge binnen element

Voorbeeld van het gebruik van badges binnen knoppen:

Voorbeeld

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

Probeer het zelf