Cant put gap between cards

HTML-CSS
1

I have three cards in upper row. I know that bootstrap cols have col-gap named gutter. but it is not working here. if I put gap-class

image
image1719×794 59.9 KB

it is showing like this. if not, it is showing together without any space between cards. I checked by putting g gx and gy but not working.
why is this not working for me?

bootstrap code:

<div class="row gap-2 d-md-flex justify-content-center align-items-center">
            <div
              class="col-lg-4 col-md-4 col-sm-12 mb-sm-3 text-center solution-card solution-card-color1"
            >
              <img src="./assets/icons/Fast.png" alt="" />
              <h5>Standard Delivery</h5>
              <p>
                Our standard delivery service is affordable and reliable, ideal for non-urgent packages needing timely delivery.
              </p>
            </div>
            <div
              class="col-lg-4 col-md-4 col-sm-12 mb-sm-3 text-center solution-card solution-card-color2"
            >
              <img src="./assets/icons/Express delivery.png" alt="" />
              <h5>Express Delivery</h5>
              <p>
                When time is of the essence, our express delivery ensures your package arrives quickly and securely.
              </p>
            </div>
            <div
              class="col-lg-4 col-md-4 col-sm-12 mb-sm-3 text-center solution-card solution-card-color3"
            >
              <img src="./assets/icons/Cargo ship.png" alt="" />
              <h5>Overnight Shipping</h5>
              <p>
                Ensure next-morning delivery with our overnight shipping service, providing speed and reliability for urgent packages.
              </p>
            </div>

        </div>
2

Hello. a found this in stack overflow, I don’t know if its the same because he’s working with a grid issue.

3

It would be nice with a live example with all the code.

The gap class will make your cards wrap, which I assume you do not want?

The gutter class is using padding. So anything on the cols, like background colors, will make it look like there isn’t a gap. If you create containers inside the cols and add the colors to them, you can see the gap between the cols. So I assume you can create containers and move the solution-card classes to that.

Example 
<div class="container">
  <div class="row g-2 d-md-flex justify-content-center align-items-center">
    <div class="col-lg-4 col-md-4 col-sm-12 mb-sm-3 text-center">
      <div class="solution-card solution-card-color1">
        <img src="https://placehold.co/60" alt="" />
        <h5>Standard Delivery</h5>
        <p>
          Our standard delivery service is affordable and reliable, ideal for non-urgent packages needing timely delivery.
        </p>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 mb-sm-3 text-center">
      <div class="solution-card solution-card-color2">
        <img src="https://placehold.co/60" alt="" />
        <h5>Express Delivery</h5>
        <p>
          When time is of the essence, our express delivery ensures your package arrives quickly and securely.
        </p>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 mb-sm-3 text-center">
      <div class="solution-card solution-card-color3">
        <img src="https://placehold.co/60" alt="" />
        <h5>Overnight Shipping</h5>
        <p>
          Ensure next-morning delivery with our overnight shipping service, providing speed and reliability for urgent packages.
        </p>
      </div>
    </div>
  </div>
</div>

.solution-card {
  padding: 2rem;
  min-height: 355px;
  color: #efef;
  img {
    margin-bottom: 1rem;
  }
}

.solution-card-color1 {
  background-color: maroon;
}

.solution-card-color2 {
  background-color: orange;
}

.solution-card-color3 {
  background-color: blueviolet;
}