You can utilize the grid system and create a container with rows and columns in bootstrap -
Your html is incorrect by using php variables not contained within php tags.Your html will look like this -
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- Cart item 1 -->
<div class="card product-card">
<img src="<?php $productImage ?>" class="card-img-top" alt="<?php $productName ?>">
<div class="card-body">
<h5 class="card-title"><?php $productName ?></h5>
<p class="card-text">Price: <?php $productPrice ?></p>
</div>
</div>
</div>
<div class="col-md-3">
<!-- Cart item 2 -->
<!-- Repeat the structure for the remaining cart items -->
</div>
<div class="col-md-3">
<!-- Cart item 3 -->
<!-- Repeat the structure for the remaining cart items -->
</div>
<div class="col-md-3">
<!-- Cart item 4 -->
<!-- Repeat the structure for the remaining cart items -->
</div>
</div>
<div class="row">
<!-- Next set of four cart items -->
<!-- Repeat the structure for the next four cart items -->
</div>
</div>
You can follow steps to create it at -
CSS Grid Container[
^]