Insignes Bootstrap 4
Exemple de titreNouvelle
Exemple de titreNouvelle
Exemple de titreNouvelle
Exemple de titreNouvelle
Exemple de titreNouvelle
Exemple de titreNouvelle
Les badges sont utilisés pour ajouter des informations supplémentaires à tout contenu. Utilisez la .badgeclasse avec une classe contextuelle (comme .badge-secondary) dans <span>
des éléments pour créer des badges rectangulaires. Notez que les badges sont mis à l'échelle pour correspondre à la taille de l'élément parent (le cas échéant) :
Exemple
<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>
Badges contextuels
Primaire
Secondaire
Succès
Danger
Avertissement
Info
Lumière
Foncé
Utilisez l'une des classes contextuelles ( .badge-*) pour modifier la couleur d'un badge :
Exemple
<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>
Insignes de pilule
Primaire
Secondaire
Succès
Danger
Avertissement
Info
Lumière
Foncé
Utilisez la .badge-pillclasse pour rendre les badges plus ronds :
Exemple
<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 à l'intérieur d'un élément
Un exemple d'utilisation d'un badge à l'intérieur d'un bouton :
Exemple
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>