So I have a question similar to this one but I’m applying it only in vanilla PHP and not in wordpress. After countless hours of struggle I finally got the answer but somehow if I increase the size of my grid number the items are not aligning.
I want it to look like this:
-----------
- 1 2 3 4 -
-----------
But:
As stated on my problem if I tried to increase the grid (or more precisely the item) it becomes like this:
-----------
- 1 2 3 4 -
- 5 -
-6 -
-7 -
-----------
It becomes cluttered. Below is the code that I’m trying to experiment.
<div class="container">
<?php
$i=0;
$item=0;
$html_tag = '<div class = "row"><div class="col 3">';
while($item <= 4)
{
?>
<?php if($i % 4 == 0) {
$html_tag .= 'col '.$i.'</div>';
}
else {
$html_tag .= '<div class="col"> col '.$i.'</div>';
}
?>
<?php
$i++;
$item++;
}
$html_tag .= '</div>';
?>
<?php echo $html_tag ?>
P.S. I’m using twitter bootstrap 4 for it’s responsiveness.
EDIT:
Notice the screenshot below, I just realized that there is an extra text which is ‘col ?3’ inside the div row instead of another div column (which wasn’t created).
2
Answers
You should inspect your code, the final structure is not correct.
This is what you got
Try with this code
NOTE: You could do exactly the same with a
while
, but I used afor
for the readabilityEDIT:
Based on your comment @DavidDiaz this is the code directly with HTML
But I recommend you to learn POO and use class to do this page
Something wrong with the accepted answer. It doesn’t close the last row. It needs another condition.