Couleurs Bootstrap4
Bootstrap 4 fournit quelques classes de couleurs représentatives :.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark et .text-light:
Exemple
<div class="container">
<h2>Couleurs de texte avec des significations spécifiées</h2>
<p class="text-muted">Texte atténué.</p>
<p class="text-primary">Texte important.</p>
<p class="text-success">Texte de succès.</p>
<p class="text-info">Texte représentant des messages d'information.</p>
<p class="text-warning">Texte d'avertissement.</p>
<p class="text-danger">Texte de danger.</p>
<p class="text-secondary">Texte secondaire.</p>
<p class="text-dark">Texte gris foncé.</p>
<p class="text-light">Texte gris clair (difficile à voir sur fond blanc).</p>
<p class="text-white">Texte blanc (difficile à voir sur fond blanc).</p>
</div>
Essayez-le vous-même »
Utilisation dans les liens
Exemple
<div class="container">
<h2>Couleurs du texte</h2>
<p>Passez la souris sur le lien.</p>
<a href="#" class="text-muted">Lien atténué.</a>
<a href="#" class="text-primary">Lien principal.</a>
<a href="#" class="text-success">Lien de succès.</a>
<a href="#" class="text-info">Lien d'information.</a>
<a href="#" class="text-warning">Lien d'avertissement.</a>
<a href="#" class="text-danger">Lien de danger.</a>
<a href="#" class="text-secondary">Lien secondaire.</a>
<a href="#" class="text-dark">Lien gris foncé.</a>
<a href="#" class="text-light">Lien gris clair.</a>
</div>
Essayez-le vous-même »
Couleurs d'arrière-plan
Les classes qui fournissent les couleurs d'arrière-plan sont :.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darket.bg-light。
Notez que la couleur d'arrière-plan ne définit pas la couleur du texte ; dans certains exemples, vous devez l'utiliser avec la.text-*classe.
Exemple
<div class="container">
<h2>Couleurs d'arrière-plan</h2>
<p class="bg-primary text-white">Couleur d'arrière-plan importante.</p>
<p class="bg-success text-white">Couleur d'arrière-plan de succès.</p>
<p class="bg-info text-white">Couleur d'arrière-plan d'information.</p>
<p class="bg-warning text-white">Couleur d'arrière-plan d'avertissement.</p>
<p class="bg-danger text-white">Couleur d'arrière-plan de danger.</p>
<p class="bg-secondary text-white">Couleur d'arrière-plan secondaire.</p>
<p classe="bg-dark text-white">Couleur d'arrière-plan gris foncé.</p>
<p classe="bg-light text-dark">Couleur d'arrière-plan gris clair.</p>
</div>
Essayez-le vous-même »