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

CodePudding user response：

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 5</small>
        <h3>5 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 5</small>
        <h3>5 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>

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;
}