Bootstrap 4 : les couleurs

Bootstrap 4, à travers des class, dispose de couleurs assez intuitives pour mieux exprimer une situation ou un état. Voyons tout ceci sur des textes et arrières plan.

Couleurs du texte

Pour appliquer des couleurs sur les textes, les class suivantes sont disponibles : 
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body, .text-light.
Il faut aussi noter que ces class peuvent être appliquées sur des liens. Au survol, la couleur est légèrement assombrie.

<div class="text-info">Texte avec la class text-info</div>
<div class="text-muted">Texte avec la class text-muted</div>
<div class="text-primary">Texte avec la class text-primary</div>
<div class="text-warning">Texte avec la class text-warning</div>
<div class="text-success">Texte avec la class text-success</div>
<div class="text-secondary">Texte avec la class text-secondary</div>
<div class="text-danger">Texte avec la class text-danger</div>
<div class="text-white">Texte avec la class text-white</div>
<div class="text-light">Texte avec la class text-light</div>
<div class="text-dark">Texte avec la class text-dark</div>
<div class="text-body">Texte avec la class text-body</div>

Le texte avec la class text-white est invisible car le texte est écrit en blanc sur un fond blanc. Aussi, le texte avec la class text-light est presqu'illisible parce que la couleur est gris-clair.

Il est possible d'appliquer une opacité de 50% sur les couleurs blanche et noire via les class .text-black-50 et .text-white-50

<div class="col-lg-12 text-black-50">Texte de couleur noire avec une opacité de 50%</div>
<div class="col-lg-12 text-white-50" style="background:black;">Texte de couleur blanche avec une opacité de 50%</div>

J'ai ajouté un arrière plan noir sur le second texte pour mieux vous montrer l'effet.

Couleurs d'arrière plan ou de fond

En ce qui concerne les couleurs de fond, les class à utiliser sont les suivantes : 
.bg-info, .bg-secondary, .bg-primary, .bg-danger, .bg-warning, .bg-success, .bg-dark.bg-light.

<div class="bg-info">Arrière plan avec la class bg-info</div>
<div class="bg-secondary">Arrière plan avec la class bg-secondary</div>
<div class="bg-primary">Arrière plan avec la class bg-primary</div>
<div class="bg-danger">Arrière plan avec la class bg-danger</div>
<div class="bg-warning">Arrière plan avec la class bg-warning</div>
<div class="bg-success">Arrière plan avec la class bg-success</div>
<div class="bg-dark">Arrière plan avec la class bg-dark</div>
<div class="bg-light">Arrière plan avec la class bg-light</div>

Il est possible de combiner les couleurs de texte et de fond.

<div class="bg-info text-danger">Arrière plan avec la class bg-info et texte avec la class text-danger</div>
<div class="bg-dark text-white">Arrière plan avec la class bg-dark et texte avec la class text-white</div>

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .