i want to change the background of the card div using PHP - php

Question

I used the for loop to get the data dynamically from the database and displayed ,Now I have to display those cards in different colors using Php No javascript is needed
<div class="row gutter-xs">
<?php
foreach($dispcnt as $object)
{
?><div class="col-xs-3 col-md-3">
<div class="card bg-info"> // card
<div class="card-values">
<div class="p-x">
<small><?php echo $object->qa;?> </small>
<h3 class="card-title-l"><?php echo $object->cnt;?> Counts</h3>
</div>
</div>
</div>
</div> // code of card ends here
<?php }?>
</div>
I want to change the color of the cards in PHP
I am excepting the cards to look like this

Answer 1

Solution A with CSS only
Actually, you don't need any PHP to do that, you could do it only with some CSS rules with the help of the :nth-child() selector.
Here's a little snippet for demo if you have 4 colors always repeating:
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: 10em;
height: 4em;
margin: .5em;
padding: .5em;
color: white;
background: #0298cf;
}
.card:nth-child(4n + 1) {
background: #0298cf;
}
.card:nth-child(4n + 2) {
background: #9b479f;
}
.card:nth-child(4n + 3) {
background: #4e484e;
}
.card:nth-child(4n + 4) {
background: #f70d1a;
}
<div class="container">
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 1</small>
<h3>1 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 2</small>
<h3>2 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 3</small>
<h3>3 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 4</small>
<h3>4 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 5</small>
<h3>5 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 6</small>
<h3>6 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 7</small>
<h3>7 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 8</small>
<h3>8 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 9</small>
<h3>9 Counts</h3>
</div>
</div>
</div>
</div>
If you want 6 colors then you would replace 4n by 6n and add the 2 other colors.
In your case, you'll have to put it on the first <div> which is in the loop, so the div directly child of the row:
.row > :nth-child(4n + 1) {
background: #0298cf;
}
.row > :nth-child(4n + 2) {
background: #9b479f;
}
.row > :nth-child(4n + 3) {
background: #4e484e;
}
.row > :nth-child(4n + 4) {
background: #f70d1a;
}
Solution B with PHP to generate a CSS class
By the way, your PHP should be in lowercase. You could also print a color class and increment it like this:
<div class="row gutter-XS">
<?php
$color = 1;
foreach ($dispcnt as $object) {
$color_class = "bg-color-$color";
if ($color < 4) {
$color++;
} else {
$color = 1;
}
?>
<div class="col-xs-3 col-md-3">
<div class="card <?php echo $color_class; ?>">
<div class="card-values">
<div class="p-x">
<small><?php echo $object->QA; ?></small>
<h3 class="card-title-l"><?php echo $object->CNT; ?> Counts</h3>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
You'll then have the possibility to have CSS rules such as:
.card.bg-color-1 {
background: #0298cf;
}
.card.bg-color-2 {
background: #9b479f;
}
.card.bg-color-3 {
background: #4e484e;
}
.card.bg-color-4 {
background: #f70d1a;
}

Answer 2

Here is a PHP-only solution. Just set an array with the desired colors and use modulo to cycle through them as you iterate over the cards. Put a style attribute on the card to set the background color.
<div class="row gutter-XS">
<?php
$colors = [
'#0298cf',
'#9b479f',
'#4e484e',
'#f70d1a',
];
$count = count($colors);
$i = 0; // increment this counter at the end of the foreach loop
foreach ($dispcnt as $object)
{
?><div class="col-xs-3 col-md-3">
<div class="card BG-info" style="background:<?php echo $colors[($i % $count)]; ?>"> <!-- card -->
<div class="card-values">
<div class="p-x">
<small><?php echo $object->QA;?> </small>
<h3 class="card-title-l"><?php echo $object->CNT;?> Counts</h3>
</div>
</div>
</div>
</div> <!-- code of card ends here -->
<?php $i++;}?>
</div>