Bootstrap 4 : les badges

Dans l'élaboration d'un contenu sur une page web, il arrive des cas où nous souhaitons donner des informations détaillées sur un bloc de contenu. A cet effet, Bootstrap 4 nous permet d'utiliser les badges à travers la class .badge et des class associées comme .badge-secondary ou autres pour donner des styles différents. Ces class sont utilisées sur un élément <span> et donnent un aperçu rectangulaire.

Voici ci-dessous les différentes class disponibles : 
Vous mettez d'abord la class .badge et ensuite une class .badge-* où * représente la précision du style que vous souhaitez appliqué.

Info Primary Secondary Warning Success Danger Light Dark

<span class="badge badge-info">Info</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Imaginons maintenant que vous avez un lien télécharger et vous voulez mettre une info concernant le nombre de téléchargements déjà effectué sur l'élément ou aussi un lien message avec le nombre de messages non lus : 

<!-- les class button et btn permettent de donner une apparence de bouton au lien (nous verrons cela dans un prochain chapitre) -->
<a type="button" class="btn btn-success">
  Télécharger <span class="badge badge-light">100</span>
</a>

<a type="button" class="btn btn-primary">
  Messages <span class="badge badge-dark">12</span>
</a>

Et ça donne :

Télécharger 100 Messages 12

Vous pouvez aussi bien arrondir les bords en ajoutant la class .badge-pill

Info Primary Secondary Warning Success Danger Light Dark

<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-warning">Warning</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-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Il faut aussi préciser que la taille du badge s'adapte à celle de l'élément parent. Pour bien illustrer cela, nous allons utiliser les balises de titre : 

<h1>Un titre h1 avec <span class="badge badge-secondary">badge</span></h1>
<h2>Un titre h2 avec <span class="badge badge-secondary">badge</span></h2>
<h3>Un titre h3 avec <span class="badge badge-secondary">badge</span></h3>
<h4>Un titre h4 avec <span class="badge badge-secondary">badge</span></h4>
<h5>Un titre h5 avec <span class="badge badge-secondary">badge</span></h5>
<h6>Un titre h6 avec <span class="badge badge-secondary">badge</span></h6>

Et ça donne :

Un titre h1 avec badge

Un titre h2 avec badge

Un titre h3 avec badge

Un titre h4 avec badge

Un titre h5 avec badge
Un titre h6 avec badge

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .