Bootstrap gutter class gx-5 isn't working horizontally - bootstrap-5

Question

I want some gaps between my cards horizontally. But when I am adding gx-5 bootstrap 5 class, it's not taking any gap horizontally. here is my code below.
<div className="container">
<div className="row gx-5">
{myProducts.map((product) => (
<div
key={product._id}
class="card col-sm-12 col-md-4 "
style={{ boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px" }}
>
<img class="card-img-top img-fluid" src={product.image} alt="" />
<div class="card-body">
<h5 class="card-title">{product.name}</h5>
<p class="card-text">{product.description}</p>
</div>
</div>
))}
</div>
</div>
Is anyone there to help me, please?

Answer 1

Try this card snippet out:
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="..." alt="..." />
<div class="card-body">
<h5 class="card-title">Product</h5>
<p class="card-text">Product</p>
</div>
</div>
</div>
Explanation:
I just nested a new card div inside the column because card class affects how Boostrap manages the gutters.
A working example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row gx-5">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
</div>
</div>
Note: I converted the code snippet into plain HTML please consider converting it back to its original state without changing the classes.