Table des matières

Le Tutoriel de Bootstrap Badge

View more Tutorials:

1- Bootstrap Badge

Badge est un composant de petite interface. Il permet de décorer de certain composant. Voici l'image d'illustration d'un  Badge utilisé dans la page.
Bootstrap applique la classe  .badge dans une étiquette (tag) afin de créer un  Badge. Quelques classes supplémentaires telles que  .badge-primary, .badge-secondary, .badge-danger,.. permet de créer la couleur de l'arrière-plan de  Badge, vous pouvez les utiliser dans le contexte approprié.
  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-link
L'exemple de l'utilisation de  Badge pour décorer des  Link :
Link with Badge
<a href="#">News <span class="badge badge-primary">5</span></a><br>
<a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
<a href="#">Updates <span class="badge badge-danger">2</span></a>
Voyez l'exemple complet :
badge-link-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Badge</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-3">Link with Badge</h4>

         <a href="#">News <span class="badge badge-primary">5</span></a><br>
         <a href="#">Comments <span class="badge badge-secondary">10</span></a><br>
         <a href="#">Updates <span class="badge badge-danger">2</span></a>

      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
Par défaut, les  Badge sont installés avec la taille de  Font est égale à 75% de celle de  Font de l'élément parent.
<h1>Example heading H1 <span class="badge badge-secondary">New</span></h1>
<h2>Example heading H2 <span class="badge badge-secondary">New</span></h2>
<h3>Example heading H3 <span class="badge badge-secondary">New</span></h3>
<h4>Example heading H4 <span class="badge badge-secondary">New</span></h4>
<h5>Example heading H5 <span class="badge badge-secondary">New</span></h5>
<h6>Example heading H6 <span class="badge badge-secondary">New</span></h6>
Badge est également utilisé pour décorer Button. Par exemple, pour un  Button, des utilisateurs cliquent sur ce  Button pour télécharger un fichier. Le  Badge permet d'affichier le nombre de téléchargement de ce fichier.
<button class="btn btn-primary">
  Download <span class="badge badge-light">5</span>
</button>

2- Badge (.badge-pill)

L'utilisation de la classe  .badge-pill permet au votre  Badge d'arrondir des 4 angles . L'illustration ci-dessous indique la différence entre un  Badge normal et un  Badge qui utilise la classe  .badge-pill :
.badge .badge-pill
<h1>
   News
   <span class="badge badge-primary">100</span>
</h1>
<h1>
   Comments
   <span class="badge badge-pill badge-primary">20K</span>
</h1>

View more Tutorials: