What is the best way to adjust card spacing in Bootstrap 5 using CSS? Here is the HTML code for 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 the associated 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 exhausted my efforts trying to reduce the spacing between the cards. Click here to see the image. As shown in the image, there seems to be a fixed space between the cards that I cannot seem to remove.