Bootstrap 5 Medaglione

Placchette

Le placchette (Badges) sono usate per aggiungere informazioni aggiuntive al contenuto:

in <span> nell'elemento .badge e classi di contesto (come .bg-secondary) per creare una placchetta rettangolare. Nota che la placchetta si adatterà alle dimensioni dell'elemento genitore (se presente):

Esempio

<h1>Titolo esempio <span class="badge bg-secondary">Nuovo</span></h1>
<h2>Titolo esempio <span class="badge bg-secondary">Nuovo</span></h2>
<h3>Titolo esempio <span class="badge bg-secondary">Nuovo</span></h3>
<h4>Titolo esempio <span class="badge bg-secondary">Nuovo</span></h4>
<h5>Titolo esempio <span class="badge bg-secondary">Nuovo</span></h5>
<h6>Titolo esempio <span class="badge bg-secondary">Nuovo</span></h6>

Prova tu stesso

Placchette di contesto

Usa qualsiasi classe di contesto (.bg-*) Modifica il colore della plachetta:

Esempio

<span class="badge bg-primary">Principale</span>
<span class="badge bg-secondary">Secondario</span>
<span class="badge bg-success">Riuscito</span>
<span class="badge bg-danger">Pericolo</span>
<span class="badge bg-warning">Avviso</span>
<span class="badge bg-info">Informazioni</span>
<span class="badge bg-light">Chiaro</span>
<span class="badge bg-dark">Scuro</span>

Prova tu stesso

Medaglia capsulare

Uso .rounded-pill La classe rende la medaglia più arrotondata:

Esempio

<span class="badge rounded-pill bg-primary">Principale</span>
<span class="badge rounded-pill bg-secondary">Secondario</span>
<span class="badge rounded-pill bg-success">Successo</span>
<span class="badge rounded-pill bg-danger">Pericolo</span>
<span class="badge rounded-pill bg-warning">Avviso</span>
<span class="badge rounded-pill bg-info">Informazioni</span>
<span class="badge rounded-pill bg-light">Chiaro</span>
<span class="badge rounded-pill bg-dark">Scuro</span>

Prova tu stesso

Medaglia all'interno dell'elemento

Esempio di utilizzo di una medaglia all'interno di un pulsante:

Esempio

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

Prova tu stesso