How to center align row content within a container div using bootstrap? - html

Question

I am doing an assignment for a Web Development course using css, html and bootstrap. I need to make a website and I am having some issues with the layout, I am using bootstrap cards (with images) within container and row div but the 3 cards in the row aren't aligned at the center of the col, there is some space left on the right side of the col as you can see in this screenshot.
This is my code:
<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>
Add to cart
</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>
Add to cart
</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>
Add to cart
</div>
</div>
</div>
</div>
</div>
I would like to know if there is any way to center align the card in the col div using css or bootstrap?
I would also like to know how to make all the card the same size (width and height) even if the images inside them are different sizes, as you can see in screenshot the last 2 cards are of different sizes because of the different image sizes.

Answer 1

To your first question:
Just use col-4 d-flex justify-content-center on your col definition.
By doing this, the card should be aligned in the middle of the col, see here.
Blue = container, purple = column, green = card.
Hope this works for you!