Les couleurs dans Bootstrap utilisent des classes spécifiques permettant de changer la couleur d’un texte, d’un titre ou encore la couleur de fond d’un élément.
Comment changer la couleur d’un texte ou d’un titre dans Bootstrap 5 ?
Pour changer la couleur d’un texte ou d’un titre avec Bootstrap 5 nous allons utiliser les classes .text-* , elles sont au nombre de 13 et représentent chacune une couleur différente.
- text-primary
- text-secondary
- text-success
- text-danger
- text-warning
- text-info
- text-light
- text-dark
- text-body
- text-muted
- text-white
- text-black-50
- text-white-50
Exemple :
<p class= »text-danger »>Texte centré sur toutes les résolutions d’écran.</p>
PS : Dans l’aperçu ci-dessous, j’ai rajouté la classe .bg (background- color) que nous allons voir plus bas, pour ajouter une couleur de fond et permettre de mieux voir certaines couleurs qui seraient trop claires autrement.
Comment changer la couleur de fond d’un élément avec Bootstrap 5 ?
Comme pour les textes, différentes couleurs de fond sont disponibles. Cette fois-ci, nous allons utiliser les classes .bg-* pour background –color.
Voici les différentes couleurs de fond proposé par Bootstrap 5 :
- bg-primary
- bg-secondary
- bg-success
- bg-danger
- bg-warning
- bg-info
- bg-light
- bg-dark
- bg-body
- bg-white
- bg-transparent
Exemple, nous voulons que notre page ait une couleur de fond noir et que notre texte soit blanc.
Pour ce faire, nous allons appliquer à la balise body les classes css suivantes :
- text- white : pour mettre le texte en blanc.
- bg-dark : pour mettre la couleur de fond en noir.
Très bien, et comment changer la couleur d’un mot dans un paragraphe ? Merci