Bootstrap grid does not show properly - php

Question

I've been working on my webpage but somehow bootstrap would not show it properly. Below is my code:
<div class="main-panel">
<div class="content-wrapper">
<button type="button" class="btn btn-primary btn-rounded btn-icon" data-toggle="modal" data-target="#newGroupModal">
<i class="ti-plus"></i>
</button>
<div class="row">
<form method="post">
<?php
foreach($data as $row) {
?>
<div class="col-md-4">
<div class="card-body">
<div class="card">
<img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">
<?=$row['group_name']?>
</h5>
<p class="card-text"></p>
<a class="btn btn-primary" href="view_group.php?group_id=<?=$row['group_id']?>">View Group</a>
</div>
</div>
</div>
</div>
</form>
<?php } ?>
</div>
</div>
</div>
I want it to be 3 column in a row but I ended up like this:
Click here to view the picture
I'm not sure whats wrong with my code, if anybody could help me identify it would be great. Thank you so much

Answer 1

<div class="main-panel">
<div class="content-wrapper">
<button type="button" class="btn btn-primary btn-rounded btn-icon" data-toggle="modal" data-target="#newGroupModal">
<i class="ti-plus"></i>
</button>
<div class="row">
<?php
foreach($data as $row) {
?>
<div class="col-4">
<form method="post">
<div class="card"> <div class="card-body">
<img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">
<?=$row['group_name']?>
</h5>
<p class="card-text"></p>
<a class="btn btn-primary" href="view_group.php?group_id=<?=$row['group_id']?>">View Group</a>
</div>
</div>
</div>
</form>
</div>
<?php } ?>
</div>
</div>
</div>
Explaination:
Change position of: <form> and <form>