Bootstrap cards stacking vertically

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

You should avoid `=` syntax as some servers have that disabled. Use ` — Raahim Fareed, Dec 21 '20 at 19:50
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Dec 21 '20 at 20:16
@RaahimFareed That is not true. That syntax is always on and it it the recommended short syntax for `echo` — Dharman, Dec 21 '20 at 20:17

score 0 · Answer 1 · answered Dec 21 '20 at 19:51

0

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

answered Dec 21 '20 at 19:51

Cosmin

864
3
16
34

score -1 · Accepted Answer · answered Dec 21 '20 at 19:56

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 } ?>

Bootstrap cards stacking vertically

2 Answers2