Couleurs Bootstrap5
Bootstrap 5 fournit quelques classes de couleurs utiles :.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(couleur par défaut, noir) et.text-light:
Exemples
<div class="container">
<h2>Couleurs de texte avec des significations spécifiques</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 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-body">Couleur par défaut, noir.</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 pouvez définir la transparence de la couleur du texte à 50% à l'aide de la.text-black-50ou.text-white-50classe :
Exemples
<p class="text-black-50">Texte noir avec 50% d'opacité, fond blanc.</p>
<p class="text-white-50 bg-dark">Texte blanc avec 50% d'opacité, fond noir.</p>
Essayez-le »
Utilisation dans les liens
Exemples
<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 »
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 les couleurs d'arrière-plan ne définissent pas la couleur du texte. Dans certains exemples, vous devez les utiliser avec la.text-*classe.
Exemples
<div class="container">
<h2>Couleur 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 Info.</p>
<p class="bg-warning text-white">Couleur d'arrière-plan Warning.</p>
<p class="bg-danger text-white">Couleur d'arrière-plan 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 noire.</p>
<p class="bg-light text-dark">Couleur d'arrière-plan gris clair.</p>
</div>
Essayez-le »