web-dev-qa-db-fra.com

Comment changer de couleur de carte de fond dans bootstrap

je veux changer la couleur d'arrière-plan d'une carte dans bootstrap de la couleur normale ou "BG-primaire" to RGBA couleur de mon choix.

card {
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 0px 20px 0 rgba(0,0,0,0.2);
    background-color: rgba(0,0,0,0.2);
    transition: 0.3s;
 }
cssbootstrap-4
6
yousif fayed

Tout d'abord - vous avez utilisé card au lieu de .card Sélecteur. Si vous voulez définir votre propre background-color pour .card vous devriez supprimer .bg-primary classe et définir des règles pour .card:

.card {
    ...
    background-color: rgba(0, 0, 0, 0.2);
    ...
}

Deuxièmement - en bootrstrap 4 background-color de .bg-primary est déclaré avec !important, il remplit donc d'autres déclarations:

.bg-primary {
    background-color: #007bff!important;
}

Vous pouvez soit ajouter votre propre classe à .card:

.bg-custom-1 {
    background-color: rgba(0, 0, 0, 0.2);
}

Ou vous pouvez définir votre couleur pour .bg-primary Si vous souhaitez toujours l'utiliser (assurez-vous que votre CSS passe après bootstrap CSS):

.bg-primary {
    background-color: rgba(0, 0, 0, 0.2)!important;
}
2
fen1x

Vous devez ajouter DOT au nom de la classe CSS ou cela ne fonctionne pas. Quelque chose comme ça:

.card {
padding-left: 20px;
padding-right: 20px;
box-shadow: 0 0px 20px 0 rgba(0,0,0,0.2);
background-color: rgba(0,0,0,0.2);
transition: 0.3s;}

Peut-être que vous devez ajouter "! IMPORTANT" aussi mais je ne suis pas sûr de cela.

0
VicDevelops