How to solve this layout with Bootstrap 4, to adjust space between columns in a row

Question

if ($result->num_rows > 0) {
            $x = 0;

            // output data of each row
            echo "<div class='row'>";

            while($row = $result->fetch_assoc()) {

                echo "<div class='col'><img class='img-fluid' src='img_pokemon/" . $row["link"] . "'></div>";

                $x++;

                if ($x == 3) {
                    echo "</div>";
                    echo "<div class='row'>";
                    $x = 0;
                }                   
            }       
            echo "</div>"; // first class: row
        }

try to do Grid View like below image (3 images in a row using Bootstrap 4) but i cannot remove spaces between columns (where circled in the pic.)

Does this answer your question? [Remove spacing between cols](https://stackoverflow.com/questions/40267056/remove-spacing-between-cols) — sanoj lawrence, May 16 '20 at 09:14
But it seems the width of three columns are not equal. e.g. Just want to let the column's width = img's width — Hoyin Cheung, May 16 '20 at 09:25

score 0 · Answer 1 · answered May 16 '20 at 09:09

0

add class ".px-0" to col to remove space

answered May 16 '20 at 09:09

Sameera Herath

165
11

How to solve this layout with Bootstrap 4, to adjust space between columns in a row

1 Answers1