For my Web Development course assignment, I am using css, html, and bootstrap to create a website. However, I am facing some layout issues with the bootstrap cards within container and row div. The problem is that the cards in each row are not aligned at the center of the column, resulting in some empty space on the right side of the col. You can see the issue in this screenshot.
Here is the code snippet causing the alignment issue:
<div class="container">
<div class="row ">
<div class="col-4">
<div class="card text-center " style="width: 18rem;">
<img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Canon EOS Rebel T7</h5>
<p class="card-text">Price : Rs. 37000.00</p>
<a href="#" class="btn btn-primary btn-block">Add to cart</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fujifilm X-T3</h5>
<p class="card-text">Price : Rs. 34000.00</p>
<a href="#" class="btn btn-primary btn-block">Add to cart</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Nikon D5600</h5>
<p class="card-text">Price : Rs. 43000.00</p>
<a href="#" class="btn btn-primary btn-block">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
I am looking for a solution to center align the cards in the column using CSS or Bootstrap. Additionally, I would like to make all the cards the same size (width and height) regardless of the different image sizes inside them. As shown in the screenshot, the last two cards have varying sizes due to different image dimensions.