Rows not moving upwards in looped content - html

Question

Hi I am new user to Bootstrap (and coding), I have some looped content which takes an image and text for each loop (of different image heights and text lengths) to create 4 columns. But the result does not flow how I would like it too - see image example [image shows how img/text layout in 4 columns] Any help or advice greatly appreciated!
Here's the code example;
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-sm-3">
<some loop code which gets 1 image and 1 set of text>
</loop>
</div>
</div>

Answer 1

You need to start a new row every fourth iteration of your loop..
$i = 0; //Count
//Start your loops
if($i % 4 === 0) {
echo '</div><div class="row">';
}
++$i;

Answer 2

I agree that you should start with a row every 4th turn but you should also close the end tag of the div properly
Here is the sample code
var i = 0;
for(your logic){
if( i%4 === 0 {
Append <div class="row">
}
elseif(i%4 !== 0 && i%4 !==3){
Append the following code
<div class="col-sm-3">
The image should be here
</div>
}
else if( i%4=== 3){
Append </div>
}
}