Bootstrap 4- badges
Voorbeeld kop Nieuw
Voorbeeld kop Nieuw
Voorbeeld kop Nieuw
Voorbeeld kop Nieuw
Voorbeeld kop Nieuw
Voorbeeld kop Nieuw
Badges worden gebruikt om aanvullende informatie aan inhoud toe te voegen. Gebruik de .badgeklasse samen met een contextuele klasse (zoals .badge-secondary) binnen <span>
elementen om rechthoekige badges te maken. Merk op dat badges worden geschaald om overeen te komen met de grootte van het bovenliggende element (indien aanwezig):
Voorbeeld
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Contextuele badges
primair
Ondergeschikt
Succes
Gevaar
Waarschuwing
Info
Licht
Donker
Gebruik een van de contextuele klassen ( .badge-*) om de kleur van een badge te wijzigen:
Voorbeeld
<span class="badge badge-primary">Primary</span>
<span class="badge
badge-secondary">Secondary</span>
<span class="badge
badge-success">Success</span>
<span class="badge
badge-danger">Danger</span>
<span class="badge
badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge
badge-dark">Dark</span>
Pil-badges
primair
Ondergeschikt
Succes
Gevaar
Waarschuwing
Info
Licht
Donker
Gebruik de .badge-pillklasse om de badges ronder te maken:
Voorbeeld
<span class="badge badge-pill badge-primary">Primary</span>
<span
class="badge badge-pill badge-secondary">Secondary</span>
<span
class="badge badge-pill badge-success">Success</span>
<span class="badge
badge-pill badge-danger">Danger</span>
<span class="badge badge-pill
badge-warning">Warning</span>
<span class="badge badge-pill
badge-info">Info</span>
<span class="badge badge-pill
badge-light">Light</span>
<span class="badge badge-pill
badge-dark">Dark</span>
Badge in een element
Een voorbeeld van het gebruik van een badge in een knop:
Voorbeeld
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>