Better way in bootstrap to display columns instead of using php to create rows after every 3

Question

Sorry for the question title. I really didn't know how to describe it best in a short sentence.

Basically I want to loop through each of my images and display them. However when doing the front end I did this:

<div class="row">
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
</div>

Because there can only be 3 columns in a row for my design this worked fine. However now if i want to do this in php i have to kind of check the $count of the loop. If its a multiple of 3 display

<div class="row">

and if its a multiple of 3 + 1 then show

</div>

to close the row.

IS there any way I can make the mark up look the same as the example above but using this html below:

    <div class="row">
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
    <div class="col-sm-4">
        <img .../>
    </div>
</div>

Its just making my mark up look very messy. Is there a better way in bootstrap to do this without using php at all?

Thanks

Your 'question' doesnt make sense. Why are you using PHP at all if the goal is to remove it? Also you didnt add any of the PHP logic in your question so how is anyone supposed to help advise you? — crazymatt
– crazymatt, Commented May 18, 2016 at 18:24
I thought it made sense, cant people just comment saying it doesnt make sense first — user3620531
– user3620531, Commented May 18, 2016 at 18:27
Even with the edits your question is unclear to me. Perhaps you are looking for (nth child css selector)[stackoverflow.com/questions/13691699/…? — crazymatt
– crazymatt, Commented May 18, 2016 at 18:37
I did not downvote. You want to dynamically add rows using PHP, right? and you want 3 per row, right? so you have either multiples of 3 (for each row) and then you have either 2 or 1 image left (if you have 3, it's a full row) - how do you want to represent the 2 or 1 image? (2 columns, 1 column, or still keep three columns?) — blurfus
– blurfus, Commented May 18, 2016 at 18:46
@user3620531 Your question is, in fact, very confusing. However, I understand what you're asking. Please review my answer and let me know if you have any questions. — Wes Foster
– Wes Foster, Commented May 18, 2016 at 21:57

Wes Foster · Accepted Answer · 2016-05-18 18:51:53Z

You'll want to include conditions in your PHP loop so that PHP knows when to add in the row.

Below, I've laid out an untested set of PHP code that will hopefully explain where you're going wrong.

<?php

$images         = array(...);
$images_per_row = 3;

// Here is where we determine how the images
// should be divided into the rows.
$total_images   = count($images);
$total_rows     = ceil($total_images / $images_per_row);

// Loop through each `row`
for ($row=0; $row<$total_rows; $row++)
{
  // Open the `row`
  echo '<div class="row">';

  // We have an `offset` to avoid displaying the same image
  // multiple times in the loop.
  $offset = $row * $images_per_row;

  // Loop through each `col-sm-4` and `img`
  for ($i=0; $i<$images_per_row; $i++)
  {
    echo '<div class="col-sm-4">';
    echo   "<img src='{$images[$offset + $i]}' />";
    echo '</div>';
  }

  // Closing the `row`
  echo '</div>';
}

There are countless ways to do this. You can even do it all within a single loop if you use proper conditions within the loop.

The point is, you need a way of telling PHP "Hey, we need to divide all of this into thirds or we're never going to get anywhere with this."

Side note, PHP + HTML is a very ugly marriage. Please avoid it at all costs (unless you only have 10 minutes and you're trying to help someone on Stack Overflow).

Collectives™ on Stack Overflow

Better way in bootstrap to display columns instead of using php to create rows after every 3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related