les badges Bootstrap 3

Les badges Bootstrap 3 standard

Les badges sont similaires aux labels. Sauf que pour les labels, ils ont des coins beaucoup plus arrondis.

Les badges sont principalement utilisés pour mettre en évidence des éléments nouveaux ou non lus (le cas d’une messagerie par exemple).

Pour créer un badge dans Bootstrap 3, il suffit d’utiliser la classe .badge.

Exemple :

Ce qui donne l’aspect suivant :

Les badges - Bootstrap 3

Exemple de badge – Bootstrap 3

Les badges Bootstrap 3 personnalisés

Par défaut, les badges Bootstrap 3, apparaissent avec un texte blanc sur fond gris. Et pour changer le rendu du badge, il convient de modificier le code CSS de la classe .badge dans le fichier bootstrap.css.

Pour cela, rendez-vous à la ligne 4328 (le numéro de ligne peut changer d’une version à l’autre). Le code CSS suivant apparait :

Nous allons changer la couleur de l’arrière plan en orange (#f0ad4e) et la couleur du texte en Orange (#f0ad4e) en changeant la valeur de la propriété CSS background-color (background-color:f0ad4e;).

à l’ecran, le badre devient orange:

Les badges - Bootstrap 3

Exemple de personnalisation d’un badge – Bootstrap 3

Dans ce cours  » Les badges dans Bootstrap 3 « , nous avons vu comment créer des badges dans Bootstrap 3 à l’aide de la classe .badge. Nous avons vu aussi, qu’à travers le fichier bootstrap.css, il est possible de changer le rendu des badges en changeant les valeurs des proprietés CSS de cette classe.

Laisser un commentaire