PHP Loop Counter Bootstrap Row

php loop counter bootstrap row

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="Sample Image" /></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">

Loop row in bootstrap every 3 columns

Edit: Originally I posted this quickly from the top of my head. Thanks, Wael Assaf for pointing out an improvement, which I have used. Also, I have added a couple of changes to the code, now it is versatile and can be used for a variable number of columns you can choose by changing the variable $numOfCols

You need to add a div for each row. Then the floating divs you have, will not just wrap around but instead will be in their own container.

The bootstrap class row is perfect for this:

Method 1 (not recommended for new versions of HTML and Browser): This method is for older version on HTML and browser because new versions of HTML and browser have inbuild functions to auto close missing tags so when you use code below it will automatically close pre-defined tag <div class="row"> rather than waiting for if condition to close that tag in result causing improper layout.

Note: you can try and observe result by inspecting elements

<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
<div class="row">
<?php
foreach ($rows as $row){
?>  
        <div class="col-md-<?php echo $bootstrapColWidth; ?>">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>
<?php
    $rowCount++;
    if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
}
?>
</div>

Uses PHP modulus operator to echo the open and close of each row at the right points.

Method 2 (recommended): This method is to overcome the problem faced by method 1, as a result, causing proper layout for modern browser.

<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
foreach ($rows as $row){
  if($rowCount % $numOfCols == 0) { ?> <div class="row"> <?php } 
    $rowCount++; ?>  
        <div class="col-md-<?php echo $bootstrapColWidth; ?>">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>
<?php
    if($rowCount % $numOfCols == 0) { ?> </div> <?php } } ?>

Note: you can try and observe result by inspecting elements

Hope this helps.

Using PHP loop to add Bootstrap rows and proper column numbers to elements

I think I found the solution by first finding at which item the last row starts and applying the appropriate column number to all the items in that row:

<?php
$max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)
$column = 12/$max_columns; //column number
$total_items = $loop->post_count;
$remainder = $loop->post_count%$max_columns; //how many items are in the last row
$first_row_item = ($total_items - $remainder); //first item in the last row
?>

<?php $i=0; // counter ?>

<?php while ( have_posts() ) : the_post(); ?> 

    <?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
    <div class="row">
    <?php } ?>

    <?php if ($i >= $first_row_item) { //if in last row ?>   
    <div class="col-md-<?php echo 12/$remainder; ?>">
    <?php } else { ?>
    <div class="col-md-<?php echo $column; ?>">
    <?php } ?>
        Content...
    </div>        

    <?php $i++; ?>

    <?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
    </div>
    <?php } ?>

<?php endwhile; ?>

<?php if($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>

The advantage is that any number (evenly divisible by 12) can be added to $max_columns and it will apply the proper columns.

PHP Loop based on row number for bootstrap columns

You need to adjust your modulus conditional to fit the loop / starting point you want.

Give this a go:

if ($article->id % 4 == 0 || $article->id % 4 == 1) { echo 8; } else { echo 4; }

https://ideone.com/IneWWC

How Can I fillup bootstrap grid using foreach?

There are couple of syntax errors in your code, such as:

• Opening and closing braces are not in sync i.e. foreach loop and if block(s) are not closed properly
• counter++; should be $counter++;

Plus, there are few logical errors as well. Change your code in the following way,

<?php 
    $counter = 0;
    foreach($view->result as $result) { 
    ?>
        <div id="hot-post" class="row hot-post">      
        <?php if( $counter == 0 || $counter % 3 == 0 ) { ?> 
            <div class="col-md-8 hot-post-left">
                <div class="post post-thumb">
                    // first element common body 
                </div>
            </div>
        <?php } ?>
        <?php if( $counter != 0 && $counter % 3 != 0 ) { ?> 
            <div class="col-md-4 hot-post-right">
            <?php if( $counter % 3 == 1){ ?>
                <div class="post post-thumb">
                    // second element common body 
                </div>
            <?php } ?>
            <?php if ( $counter % 3 == 2){ ?>
                <div class="post post-thumb">
                    // third element common body 
                </div>
            </div>
            <?php } ?>
        </div>
    <?php
        }
        ++$counter;
    } 
?> 

Implementing a PHP counter inside of a while loop to wrap list items with ul elements

<?php $counter = $counter++; ?>

this line is wrong, use either

<?php $counter++; ?>

or

<?php $counter = $counter +1; ?>

scaffolding for bootstrap columns in php while loops

The most elegant solution is to use PHP's array_chunk function:

 foreach(array_chunk($entries, 4) as $entriesRow) {
     echo '<div class="row">';
         foreach ($entriesRow as $entry) {
             echo "<div class='col-md-3'>$entry</div>";
         }
     echo '</div>';
 }

(Assuming that you have fetched all DB rows in $entries array.)

---

Related Topics