0

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 />';
 }
Improve this question
4
  • But where is your while loop Commented Mar 21, 2015 at 12:31
  • there is none, im sorry, i said while loop, when i ment to say foreach Commented Mar 21, 2015 at 12:35
  • Before your loop, what does print_r($data) look like? Commented Mar 21, 2015 at 13:09
  • see the answer provided below by Adarsh Rajput Commented Mar 24, 2015 at 15:51

1 Answer 1

Reset to default
7

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">

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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.
@defiancenl: i edited the code, check that. ** Just need to put row-close-open-logic at END.**
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
@defiancenl: Sorry, we need to move the logic down, but not echo '<div class="col-md-3">';, move it up again, I Edited the code.
that did the trick! now for me to figure out, what you did here :D
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.