The card design displayed here needs to be aligned to the side
I am attempting to showcase data from my database using PHP Codeigniter. The data is displaying correctly, but the issue I'm facing is that the card layout is positioned vertically instead of horizontally. You can refer to the image provided above for reference.
My goal is to have the cards align horizontally when looping through the data using a foreach loop, and then stack them vertically after every 4 or 5 cards.
I have attempted to adjust the position of the foreach loop code, but it hasn't resolved the issue. I am utilizing Bootstrap 4 for this project.
Below is the code snippet:
<div class="row">
<div class="container">
<div class="card-body">
<?php
foreach ($user as $u) {?>
<div class="col-md-2 mt-4">
<div class="card mt-3" style="width:15rem;">
<img src="<?=base_url() . 'assets/img/' . $u->gambar_game;?>"
class="card-img-top img-responsive" alt="...">
<h5 class="card-title font-weight-bold "><?php echo $u->nama_game; ?></h5>
<p class="card-text"><?=$u->deskripsi_game;?></p>
<a href="<?=base_url() . 'assets/games/' . $u->link_game;?>"
class="btn btn-primary btn-block">Play Game</a>
</div>
</div>
</div>
<?php }?>
</div>
</div>