Bootstrap 2 cards in a row using PHP and mysql - php

Question

I am trying to get data from a database and in the frontend I am showing data in cards in 1 row and 2 columns using bootstrap and PHP. But, I am getting the data for the first row but the remaining are cards coming one below one
<?php
$con = mysqli_connect('localhost', 'root', '', 'applicants');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$qry = "select * from feedback";
$result = mysqli_query($con, $qry);
?>
<div class="main-content">
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<?php $i=0;
while ($row = $result->fetch_assoc()) {
$i++;?>
<?php if ($i %2 == 0){?>
<!-- <div class="row"> -->
</div>
<div class="col-6 mt-5"><?php } ?>
<div class="card">
<div class="card-body">
<h5 class="card-title"> <?php echo $row['username']?></h5>
<h6 class="card-subtitle mb-2 text-muted"><?php echo $row['email'] ?></h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6><?php echo $row['subject'] ?></h6>
<p class="card-text"><?php echo $row['message'] ?></p>
</div>
</li>
</ul>
</div>
</div>
<?php if ($i %2 == 0){?>
</div>
<!-- </div> --><?php } ?>
<!-- </div> -->
</div>
<?php } ?>
</div>
</div>

Answer 1

Your tags for the row and cols seem to be off. Please compare them against this code that generates two rows:
<div class="main-content-inner">
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h6 class="card-subtitle mb-2 text-muted">Email</h6>
<ul>
<li>
<div class="left alert alert-success" role="alert">
<h6>Subject</h6>
<p class="card-text">Message</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>