Bootstrap 5 medaljer

Firkanter

Firkanter (Badges) brukes til å legge til tilleggsinformasjon til innhold:

i <span> elementer med .badge klasser og kontekstklasser (som

Eksempel

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

Prøv det selv

kontekstfirkant

Brug en hvilken som helst kontekstklasse (.bg-*) ændre firkantets farge:

Eksempel

<span class="badge bg-primary">primær</span>
<span class="badge bg-secondary">sekundær</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">Farlig</span>
<span class="badge bg-warning">Advarsel</span>
<span class="badge bg-info">Information</span>
<span class="badge bg-light">Lys</span>
<span class="badge bg-dark">Mørk</span>

Prøv det selv

Kapselbadge

Brug .rounded-pill Klasser gør badges mere runde:

Eksempel

<span class="badge rounded-pill bg-primary">Primær</span>
<span class="badge rounded-pill bg-secondary">Sekundær</span>
<span class="badge rounded-pill bg-success">Succes</span>
<span class="badge rounded-pill bg-danger">Farlig</span>
<span class="badge rounded-pill bg-warning">Advarsel</span>
<span class="badge rounded-pill bg-info">Information</span>
<span class="badge rounded-pill bg-light">Lys</span>
<span class="badge rounded-pill bg-dark">Mørk</span>

Prøv det selv

Badge inden for element

Eksempel på brug af badges inden for knapper:

Eksempel

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

Prøv det selv