Les couleurs dans Bootstrap 5

les couleurs dans bootstrap 5

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.

Table des matieres

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.

Les couleurs de texte dans Bootstrap 5-min

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
Les couleurs de fond dans Bootstrap 5

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.
Les couleurs de texte dans Bootstrap 5
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0