Bootstrap columns in loop with php

Question

I'm trying to show my news block with bootstrap4 as

<div class="col-md-3">
    <div class="card mb-4">
      <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>

    <div class="card mb-4">
          <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>
</div>

<div class="col-md-3">
    <div class="card mb-4">
        <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>
    <div class="card mb-4">
         <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>
</div>

 <div class="col-md-6">
  <div class="card mb-big">
        <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
  </div>     
</div>

I have an array with results of database query in

$arResult["ITEMS"]

I want to do this with loop by

<? foreach ($arResult["ITEMS"] as $arItem): ?>   

 <?endforeach?>

I know i need to use something like

$i=0
  if (i===2){ 
   } else if ($k === 4) {
    } else {}
  $i++;

but how can i remove col-md-3 from loop.

<?php
 $i=0
  foreach ($arResult["ITEMS"] as $arItem): ?>
    <div class="col-md-3">
     <div class="card mb-4"></div>
    </div>

  if (i===2){ 
    <div class="col-md-3">
     <div class="card mb-4"></div>
    </div>
   } 
   if (i===4){ 
    <div class="col-md-6">
     <div class="card mb-4"></div>
    </div>
   }

I'm afraid I'm a little confused. How to show it in one loop?

Do you have the exact count of values (eg: 5) in your array? — Syscall
– Syscall, Commented Mar 25, 2018 at 13:23
"but how can i remove col-md-3 from loop ... <code>" "I know i need to use something like...<code>" - That appears to be pseudo code. If that isn't, then you have parse errors and undefined constants. You should also show us a diagram of what you're getting now, just like the one you posted for what you want it to look like. — Funk Forty Niner
– Funk Forty Niner, Commented Mar 25, 2018 at 13:27

Syscall · Accepted Answer · 2018-03-25 13:27:24Z

Assuming you have 5 elements in the array, you could use %2 (modulo) to write <div class="col-md-3"> and check if it's the last element to change col-md-3 to col-md-6 and mb-4 to mb-big:

if (!empty($arResult["ITEMS"])) {

    foreach ($arResult["ITEMS"] as $k => $item) {

        $is_last = $k == count($arResult["ITEMS"]) - 1;

        if ($k%2 == 0) {
            echo '<div class="'.($is_last?'col-md-6':'col-md-3').'">';
        }

        echo'  <div class="card '.($is_last?'mb-big':'mb-4').'"></div>';

        if ($k%2 == 1) echo '</div>';
    }

    echo '</div>';
}

Will output (reformatted):

<div class="col-md-3">
  <div class="card mb-4"></div>
  <div class="card mb-4"></div>
</div>
<div class="col-md-3">
  <div class="card mb-4"></div>
  <div class="card mb-4"></div>
</div>
<div class="col-md-6">
  <div class="card mb-big"></div>
</div>

Collectives™ on Stack Overflow

Bootstrap columns in loop with php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related