I am experimenting with changing the background-color of the card-body in bootstrap 4, but I am unsure about how to access the card-body element since each body has a different parent (I believe my understanding is correct). Can this be achieved using the code below?
Below is a snippet that demonstrates the paragraphs working, but the cards are not responsive to the changes:
.bg-alt:nth-child(5n+1){background-color: #5bc0de;}
.bg-alt:nth-child(5n+2){background-color: #ed9c28;}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<p class="bg-alt"><span>test 1</span></p>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin ">
<div class="card">
<div class="bg-alt">
98787667f
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
45645656u57u5
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
456456456456
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
123123
</div>
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 grid-margin">
<div class="card">
<div class="bg-alt">
324234234
</div>
</div>
</div>
</div>
</body>
</html>