skip to Main Content

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).

enter image description here

2

Answers


  1. You should inspect your code, the final structure is not correct.

    This is what you got

    <div class="container">
        <div class="row">
            <div class="col 3">col 0</div>
            <div class="col"> col 1</div>
            <div class="col"> col 2</div>
            <div class="col"> col 3</div>
            col 4
        </div>
    </div>
    

    Try with this code

    $html = '';
    $totalItemPerLine = 3;
    $totalItem = 7;
    for($i = 0; $i < $totalItem; $i++)
    {
        if($i % $totalItemPerLine == 0)
        {
            $html .= '<div class="row">'; // OPEN ROW
        }
    
        $html .= '<div class="col"> col '.$i.'</div>';
    
        if($i % $totalItemPerLine == ($totalItemPerLine-1))
        {
            $html .= '</div>'; // CLOSE ROW
        }
    }
    
    echo $html;
    

    NOTE: You could do exactly the same with a while, but I used a for for the readability

    EDIT:

    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

    $html = '';
    $totalItemPerLine = 3;
    $totalItem = 7;
    for($i = 0; $i < $totalItem; $i++)
    {
        if($i % $totalItemPerLine == 0)
        {?>
            <div class="row"> <!-- OPEN ROW -->
        <?php } ?>
    
        <div class="col"> col <?= $i ?> </div>
    
        <?php if($i % $totalItemPerLine == ($totalItemPerLine-1))
        { ?>
            </div> <!-- CLOSE ROW -->
        <?php }
    } ?>
    
    Login or Signup to reply.
  2. Something wrong with the accepted answer. It doesn’t close the last row. It needs another condition.

    $html = '';
    $totalItemPerLine = 3;
    $totalItem = 7;
    for($i = 0; $i < $totalItem; $i++)
    {
        if($i % $totalItemPerLine == 0)
        {
            $html .= '<div class="row">'; // OPEN ROW
        }
    
        $html .= '<div class="col"> col '.$i.'</div>';
    
        if($i % $totalItemPerLine == ($totalItemPerLine-1) || $i == ($totalItems-1))
        {
            $html .= '</div>'; // CLOSE ROW
        }
    }
    
    echo $html;
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search