php loop counter bootstrap row

Question

Ive seen alot of solutions here on Stack but none seem to work for me, so im trying to write it based upon what im seeing others do.

Im able to count the columns and start the new row, but the problem is, since im doing this in a foreach (getting data from DB) it will now place each entry from DB 4 times->close the row; start a new row->and show the second entry from DB 4 times->close the row; start a new row->and shows the third entry from DB 4 times, and so on... (my code is on the bottom of this post)

So, right now this code displaying items like:

col-md3(item1)  | col-md3(item1)  |  col-md3(item1)  | col-md3(item1)
col-md3(item2)  | col-md3(item2)  |  col-md3(item2)  | col-md3(item2)
....
....

however, i want it to display like:

col-md3(item1)  | col-md3(item2) | col-md3(item3) | col-md3(item4)
col-md3(item5)  | col-md3(item6) | col-md3(item7) | col-md3(item8)
....            |  ...           |  ....          |  ....
....

My code right now :

foreach($data as $row) {
    echo '<div class="row">';
    for ($i=0; $i<4;$i++){
        if ($i%4 == 0 && $i != 0){
            echo '</div><div class="row">';
        }
        echo '<div class="col-md-3">';
        ?>
        <!-- Ecommerce UI #2 -->
            <div class="ecom-ui ecom-ui-two">
                <div class="img-container">
                    <!-- Product Image -->
                    <a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a>
                </div>
                <!-- product details -->
                <div class="product-details">
                    <!-- product title -->
                    <h4><a href="#"><?php echo $row[name]; ?></a> <span class="color pull-right">€<?php echo $row[price]; ?></span></h4>
                    <div class="clearfix"></div>
                    <p>Lorem Ipsum is simply dummy text of printing the printing industry.</p>
                    <!-- Price -->
                    <div>
                        <span class="cart"><a href="#">Add to cart</a></span>
                        <!-- Media icon -->
                        <span class="p-media pull-right">
                            <a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a>
                            <a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a>
                            <a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a>
                        </span>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <!-- Ecommerce UI #2 -->
            <?php
         echo'</div>';
     }
     echo '</div><br />';
 }

there is none, im sorry, i said while loop, when i ment to say foreach — , Mar 21 '15 at 12:35

Adarsh Rajput · Accepted Answer · 2015-03-21T14:19:19.867

There is logic error in printing code. You need only one loop, not nested. Change your code as below:

<?php .....
....
$i=0;
echo '<div class="row">';
foreach($data as $row) {
    echo '<div class="col-md-3">';
    ?>
    <!-- Ecommerce UI #2 -->
    <div class="ecom-ui ecom-ui-two">
        <div class="img-container"><!-- Product Image -->
            <a href="#"><img class="img-responsive" src="img/product/<?php echo $row[thumbimage]; ?>" alt="" /></a>
        </div>
        <!-- product details --><div class="product-details">
            <!-- product title -->
            <h4><a href="#"><?php echo $row[name]; ?></a><span class="color pull-right">€<?php echo $row[price]; ?></span></h4>
            <div class="clearfix"></div>
            <p>Lorem Ipsum is simply dummy text of printing the printing industry.</p>
            <!-- Price --><div>
                <span class="cart"><a href="#">Add to cart</a></span>
                <!-- Media icon --><span class="p-media pull-right">
                    <a href="#" class="b-tooltip" data-placement="top" title="21"><i class="fa fa-heart red"></i></a>
                    <a href="#" class="b-tooltip" data-placement="top" title="49"><i class="fa fa-share-alt red"></i></a>
                    <a href="#" class="b-tooltip" data-placement="top" title="35"><i class="fa fa-thumbs-up red"></i></a>
                </span>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- Ecommerce UI #2 -->
    </div>
    <?php
    $i++;
    if ($i%4 == 0) echo '</div><div class="row">';
} ?>
</div><br />

Logic: Need to loop through all(each) rows in $data, when loop executed 4 times then break the row(by </div>) and start the new (by <div class="row">). To handle that start the counter $i before loop with 0 and increment it by 1 after each loop. When $i is fully-dividable by 4 then echo "closing-row(div)-and-starting-row(div)-code", ie. </div><div class="row">

This is almost doing what i want, however in the first row, it will only place 3 columns instead of 4, rows after the first one are all ok. — , Mar 21 '15 at 13:52
@defiancenl: i edited the code, check that. ** Just need to put row-close-open-logic at END.** — Adarsh Rajput, Mar 21 '15 at 14:01
no, that messes it up , leaving a column in the center in the first row, and then 3 on the second, and then its ok — , Mar 21 '15 at 14:15
@defiancenl: Sorry, we need to move the logic down, but not `echo '
';`, move it up again, **I Edited the code.** — Adarsh Rajput, Mar 21 '15 at 14:19
that did the trick! now for me to figure out, what you did here :D — , Mar 24 '15 at 15:50
This is not entirely proper. if row count is divisible by 4 you will always have an empty row at the end. — David, Jul 14 '17 at 08:48
@David- I have provided solution to the problem raised by OP, as its just HTML. You can add more logic/checks for the issue raised by you, if you are ok to use more CPU time. Thanks for the information & down-vote, I accept the incompleteness in my answer :) — Adarsh Rajput, Jul 25 '17 at 10:02

php loop counter bootstrap row

1 Answers1

Linked

Related