Bootstrap 5 medaljer

Märken

Märken (Badges) används för att lägga till ytterligare information till innehållet:

i <span> element med .badge Klasser och kontextklasser (som

Exempel

<h1>Exempel rubrik <span class="badge bg-secondary">Ny</span></h1>
<h2>Exempel rubrik <span class="badge bg-secondary">Ny</span></h2>
<h3>Exempel rubrik <span class="badge bg-secondary">Ny</span></h3>
<h4>Exempel rubrik <span class="badge bg-secondary">Ny</span></h4>
<h5>Exempel rubrik <span class="badge bg-secondary">Ny</span></h5>
<h6>Exempel rubrik <span class="badge bg-secondary">Ny</span></h6>

Prova själv

Kontextmärken

Använd valfri kontextklass (.bg-*) Ändra färgen på märkena:

Exempel

<span class="badge bg-primary">Primär</span>
<span class="badge bg-secondary">Secundär</span>
<span class="badge bg-success">Framgång</span>
<span class="badge bg-danger">Farlig</span>
<span class="badge bg-warning">Varning</span>
<span class="badge bg-info">Information</span>
<span class="badge bg-light">Ljust</span>
<span class="badge bg-dark">Mörk</span>

Prova själv

Kapsellmedaljer

Använd .rounded-pill Klasser gör medaljer mer rundade:

Exempel

<span class="badge rounded-pill bg-primary">Huvudsaklig</span>
<span class="badge rounded-pill bg-secondary">Sekundär</span>
<span class="badge rounded-pill bg-success">Lyckad</span>
<span class="badge rounded-pill bg-danger">Farlig</span>
<span class="badge rounded-pill bg-warning">Varning</span>
<span class="badge rounded-pill bg-info">Information</span>
<span class="badge rounded-pill bg-light">Ljust</span>
<span class="badge rounded-pill bg-dark">Mörk</span>

Prova själv

Medalj inom element

Exempel på användning av medaljer inom knappar:

Exempel

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

Prova själv