Les badges sur un site Web sont utilisés pour fournir des informations importantes à l'utilisateur, comme un avertissement, un nombre de notification, une promotion d'un certain programme, etc. Bootstrap 5 fournit une certaine classe qui vous permet de créer des badges sur votre site Web. Outre leur création, d'autres cours sont également disponibles pour coiffer les badges. Ce blog vous guide sur la façon de créer et de coiffer les badges en utilisant Bootstrap 5.

Comment créer un badge

Dans le but de créer un badge, utilisez le .classe de badge avec une classe de couleurs d'arrière-plan qui sont .bg-primaire, .bg-succès, .bg-secondaire, .bg-info, .bg, .bg-danger, .Bg-Light, .Bg-Dark.

Html

Cliquez ici Important

Cliquez ici Important

Pour créer un badge, l'élément est utilisé dans un

et

élément. L'élément a été attribué le .classe de badges avec une classe de couleurs d'arrière-plan, .bg-warning pour donner au badge un fond jaune. Notez qu'un badge par défaut a une forme rectangulaire et s'évalue de haut en bas pour correspondre à la taille de l'élément parent, s'il y en a.

Sortir

Les badges dans la sortie ci-dessus sont utilisés pour attirer l'attention d'un utilisateur.

Comment donner une couleur d'arrière-plan aux badges

Les badges peuvent être fournis une couleur d'arrière-plan en utilisant l'une des classes de couleur d'arrière-plan. Ces classes jouent un rôle important dans la transmission du sens d'un badge.

Html

Badge
Badge
Badge
Badge

Ici, nous avons créé quatre badges et chacun d'eux a reçu une classe de couleurs d'arrière-plan différente.

Sortir

Chaque badge transmet une signification différente.

Comment créer des badges arrondis

Comme déjà mentionné, les badges par défaut ont une forme rectangulaire, cependant, si vous souhaitez leur donner une forme arrondie, utilisez le .punis arrondi classe.

Html

Badge
Badge
Badge
Badge

Le code ci-dessus générera chacun quatre badges en forme de pilule avec une couleur d'arrière-plan différente.

Sortir

Les badges ont reçu une forme arrondie avec succès.

Comment créer des comptoirs

Les badges comptables peuvent être utilisés pour afficher le nombre de notifications d'un certain élément. Dans le but de fabriquer de tels badges, vous devez nicher l'élément dans cet élément particulier.

Html

Appels manqués 8

Ici, nous avons créé un bouton «Appel manqué» ayant un certain style, puis nous avons imbriqué un élément qui a également un certain style et affiche le nombre d'appels manqués, affichant ainsi le nombre de notification pour les appels manqués.

Sortir

La sortie ci-dessus montre qu'il y a un total de 8 appels manqués.

Conclusion

Dans le but de créer et de coiffer les badges à l'aide de bootstrap 5 .badge classe avec l'une des classes de couleurs de fond qui sont .bg-primaire, .bg-succès, .bg-secondaire, .bg-info, .bg, .bg-danger, .Bg-Light, .Bg-Dark Pour leur donner une couleur d'arrière-plan. De plus, un badge par défaut a une forme rectangulaire, cependant, celles-ci peuvent recevoir une forme arrondie en utilisant le .punis arrondi classe. De plus, vous créez un compteur de notification en nichant l'insigne à l'intérieur d'un élément.