Remplacement des couleurs de fond de bootstrap

Question

Je suis en train de tenter de remplacer la couleur de fond que Bootstrap utilise pour sa classe "bg-dark". Pour cela, j'ai importé dans un fichier CSS séparé avec ceci :

.bg-dark {
  background-color: black;
}

Mais cela ne semble pas changer la couleur de fond. Cependant, si je le fais de cette façon, ça fonctionne :

.bg-dark {
  background-color: black !important;
}

Pourquoi est-ce ainsi ? Et y a-t-il un moyen de le faire sans devoir recourir à !important ?

Answer 1

N'utilisez pas la même classe qui est déjà définie. Utilisez la classe définie par l'utilisateur et définissez la couleur

Answer 2

Le mot-clé !important signifie que la règle prendra le pas sur toute autre classe, quelle que soit l'ordre de chargement. C'est mauvais car cela va à l'encontre de la cascade (c'est-à-dire que vous ne pourrez jamais écraser proprement cela maintenant)

Vous devez vous assurer que votre feuille de style se charge après bootstrap et vous pourrez alors remplacer avec succès

Answer 3

Bonne question,

La façon dont fonctionne le CSS est que plus le style est proche de l'élément, plus il est important. Cependant, la balise !IMPORTANT prend le dessus sur les autres. Par exemple, si vous écrivez style="background-color:black" à l'intérieur de l'élément, cela remplacera la feuille de style extérieure définissant la couleur de fond.

J'espère que cela vous aide!