Vous êtes sur la page 1sur 2

Couleur et opacité des textes

Les classes Bootstrap nous permettant de modifier la couleur des textes sont les suivantes :
• .text-primary : texte bleu ;
• .text-seconday : texte gris-bleu ;
• .text-success : texte vert ;
• .text-danger : texte rouge ;
• .text-warning : texte jaune ;
• .text-info : nuance de bleu ;
• .text-light : texte gris clair ;
• .text-dark : texte gris foncé ;
• .text-body : texte noir ;
• .text-muted : texte gris ;
• .text-white : texte blanc ;
• .text-black-50 : texte noir semi transparent ;
• .text-white-50 : texte blanc semi transparent ;
<p class="text-primary">.text-primary</p>

POUR COLORIER LES LIENS


Attention cependant : les classes .text-white et .text-muted ne vont pas offrir de
changement de couleur lors du survol ou du clic sur un lien.

<p><a href="#" class="text-primary">Primary link</a></p>

Notez également que la couleur de fond d’une ancre va foncer lors du survol de
la souris exactement comme c’était le cas pour les textes.

Notez que certains éléments particuliers et composants de Bootstrap vont


posséder leurs propres classes de couleur comme les boutons (élément HTML
button) par exemple.

Modifier couleur de fond d’un élément


La seule différence est que nous allons cette fois-ci utiliser le préfixe .bg- (pour background)
plutôt que .text-.
<!--Les classes .p-3 et .mb-2 servent simplement à définir un
padding et une marge extérieure basse pour séparer nos divs.
La classe border permet d'ajouter des bordures-->
Pour un lien
<div class="p-3 mb-2"><a class="bg-primary text-white" href="#">.bg-primary
(lien)</a></div>
pour un texte
<div class="p-3 mb-2 bg-white text-dark border">.bg-white</div>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
Utiliser une couleur non disponible dans le
thème Bootstrap de base
Dans le cas où les classes Bootstrap ne nous suffisent pas et où on souhaite aller plus loin dans
la personnalisation d’une page, comme par exemple dans le cas où on souhaite appliquer une
couleur qui ne correspond pas à la liste des classes contextuelles fournie par Bootstrap, on va
avoir deux solutions : soit rajouter des styles manuellement (non recommendee par risque de
conflit), soit ajouter des éléments en se basant sur le fichier de base de Bootstrap. NOUS
ALLONS ETUDIER CELA PLUS TARD

Vous aimerez peut-être aussi