Bootstrap cards stacking vertically - php

Question

Afternoon all, I'm currently working on a personal project using the bootstrap framework and PHP. Essential what I am trying to achieve is when I pull data from my MySQL database for it to be displayed in the bootstrap card element in horizontal rows of 4 individual cards.
As it stands the technical aspects of pulling data and displaying it works. But when going onto the page, the card elements are stacked. On top of each other vertically in one long list. As it stands, I'm not too sure how to fix this any help would be appreciated.
What it looks like atm
Main Page Code
<?php
include("inc/dbconfig.php");
include("inc/functions.php");
error_reporting(0);
$search = $_POST['search'];
$mysqlQ =("SELECT * FROM cards WHERE cardName LIKE '%$search%'");
$result = $conn -> query($mysqlQ);
if ($result -> num_rows > 0) {
while ($row = $result -> fetch_assoc()) {
itemCard($row);
}
}
else {
echo "<h1 class='search-h1'>No Results Found!</h1>";
echo "<h4 class='search-h4'>It looks like no results could be found, please try again.</h4>";
}
$conn -> close();
Card Function
<?php function itemCard (array $row) { ?>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm6 col-xs-12">
<div class="card">
<div class="card-img">
</div>
<div class="card-body">
<h5 class="card-title text-center"><?= $row["cardName"] ?></h5>
<p class="text-center">Card Set: <b><?= $row["cardSet"] ?></b></p>
<p class="text-center">Card Set: <b><?= $row["cardRarity"] ?></b></p>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
Note: Currently not using any custom CSS at this stage I was trying to use the default bootstrap functionality for the layout

Answer 1

You are returning a container and a row on each iteration.
You should have a single container and a row generated after 4 cards.

Answer 2

You should print your container and row once before printing items.
Main Page Code
<?php
include("inc/dbconfig.php");
include("inc/functions.php");
error_reporting(0);
$search = $_POST['search'];
$mysqlQ =("SELECT * FROM cards WHERE cardName LIKE '%$search%'");
$result = $conn -> query($mysqlQ);
if ($result -> num_rows > 0) {
# container beginning tags
echo '<div class="container"><div class="row">';
# container content
while ($row = $result -> fetch_assoc()) {
itemCard($row);
}
# container ending tags
echo '</div></div>';
}
else {
echo "<h1 class='search-h1'>No Results Found!</h1>";
echo "<h4 class='search-h4'>It looks like no results could be found, please try again.</h4>";
}
$conn -> close();
Card Function
<?php function itemCard (array $row) { ?>
<div class="col-lg-3 col-md-4 col-sm6 col-xs-12">
<div class="card">
<div class="card-img">
</div>
<div class="card-body">
<h5 class="card-title text-center"><?= $row["cardName"] ?></h5>
<p class="text-center">Card Set: <b><?= $row["cardSet"] ?></b></p>
<p class="text-center">Card Set: <b><?= $row["cardRarity"] ?></b></p>
</div>
</div>
</div>
<?php } ?>