Bootstrap gutter class gx-5 isn't working horizontally

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/[email protected]/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.