CODEWITHSUNDEEP
phpwordpress
None
None

Reputation: 9247

How to display 4 items in one row and 4 in second row and so on...?

So what i need is to have this vertical_align div where i display 4x col-md-3 and then display in next div vertical_align next 4x col-md-3 and so on?

<?php 
  foreach ($images as $image) {
            $image_attributes = wp_get_attachment_url( $image->ID );
   ?>
        <div class="vertical_align">
            <div class="col-md-3">
                <a href="">
                    <img src="<?php echo $image_attributes ?>" alt=""/>
                </a>
            </div>
            <?php
                 $count++;
               ?>
            </div>
        <?php }?>

Upvotes: 0

Views: 66

Answers (1)

Ravinder Reddy
Ravinder Reddy

Reputation: 3879

See below code to close the div and open a new div for each 4 items.

<div class="vertical_align"">
<?php foreach ($images as $image) {
    $image_attributes = wp_get_attachment_url( $image->ID );?>
        <div class="col-md-3">
            <a href="">
                <img src="<?php echo $image_attributes ?>" alt=""/>
            </a>
        </div>
        <?php
             $count++;
             // if reaches 4 items close the div and open a new div
             if($count % 4 ==0){?>
                </div> 
                <div class="vertical_align"">
            <?php  }     
     }?>
</div>

You can change the value to any number by replace 4 to any number.

Upvotes: 3

Related Questions