how to reduce spacing between cards in bootstrap-5 using CSS

Question

how to reduce the spacing between cards in bootstrap-5 using CSS. this is HTML code of the cards section.

<section id="services">
  <div class="container">
    <div class="row text-center">
    <div class="col-md-12">
    <img src="images/network.png" class="service-img">
    <h4 class="services-head mb-2">Search Facilities</h4>
    </div>
    </div>
    <div class="row row-cols-1 row-cols-md-2 g-0">
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">Blood</h4>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">Donation</h4>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">People Needs</h4>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card">
          <img src="images/network.png" class="service-list">
          <div class="card-body">
            <h4 class="card-title">Education</h4>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</section>

here is CSS code:

#services{
    padding: 80px 0;

}
.service-img{
    width: 100px;
    margin: top 20px;
}
.services-head{
    color: #2596be;
    padding-top: 10px;
    font-family: "Exo", sans-serif;
}
.card{
    text-align: center;
    margin-top: 10px;
    border-color: #2596be;
    border-radius: 5px;
    padding: 30px 0;
    width: 150px;
    height: 150px;
}
.card .card-title{
    color: #2596be;
    font-family: "Exo", sans-serif;
    font-size: medium;
}
.service-list{
    width: 70px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

I have tried too much but unable to remove the spacing. enter image description here As you can see in image the space. The spacing between the cards is fix. I tried a lot to fix it but it could not.

Answer 1

Two easy-to-miss issues led to your problem. The first is that cards have default margins and padding that must be manually set to zero. The second was in the separate div that specifies the column. I restructured your code like this:

    #services {
        padding: 80px 0;
    }

    .service-img {
        width: 100px;
        margin-top: 20px;
    }

    .services-head {
        color: #2596be;
        padding-top: 10px;
        font-family: "Exo", sans-serif;
    }

    .container {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .card {
        text-align: center;
        margin-top: 10px;
        border-color: #2596be;
        border-radius: 5px;
        width: 150px;
        height: 150px;
        margin: 0;
    }

    .card .card-title {
        color: #2596be;
        font-family: "Exo", sans-serif;
        font-size: medium;
    }

    .service-list {
        width: 70px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

<section id="services">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-12">
                <img src="images/network.png" class="service-img">
                <h4 class="services-head mb-2">Search Facilities</h4>
            </div>
        </div>
        <div class="row d-flex flex-row justify-content-center">
            <div class="card">
                <img src="images/network.png" class="service-list">
                <div class="card-body">
                    <h4 class="card-title">Blood</h4>
                </div>
            </div>
            <div class="card">
                <img src="images/network.png" class="service-list">
                <div class="card-body">
                    <h4 class="card-title">Donation</h4>
                </div>
            </div>
            <div class="card">
                <img src="images/network.png" class="service-list">
                <div class="card-body">
                    <h4 class="card-title">People Needs</h4>
                </div>
            </div>
            <div class="card">
                <img src="images/network.png" class="service-list">
                <div class="card-body">
                    <h4 class="card-title">Education</h4>
                </div>
            </div>
        </div>
    </div>
</section>