Margin between card with bootstrap - html

Question

I have some card with bootstrap and I would like to have left margin...I would like the cards to be evenly distributed across the width.
Basically, You can see that there is red on the right, and I wish there wasn't...
.azer {
background: red;
}
.card-annuaire {
background: green;
border: 0;
border-radius: 0;
margin-right: 1rem;
}
.card-annuaire .card-body {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf">
<div class="azer">
<div class="col-md-12">
<div class="row g-0">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
<!-- /.card-text -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can see here: https://codepen.io/zazzou/pen/abYdZQL
EDIT
This is what I would like to do : (no margin left and right before and after the first card and last card)

Answer 1

Remove the margin-right: 1rem; from the .card-annuaire class, and replace g-0 on your row class to gx-3. This adds gutters in between your cards
Edit: Check this link out for more info on how gutters work in bootstrap: Bootstrap Gutters

Answer 2

Restore the column gutters
Make the cards full width
Place the red background on the row rather than a separate element
.azer {
background: red;
}
.card-annuaire {
width: 100%;
background: green;
border: 0;
border-radius: 0;
margin-right: 1rem;
}
.card-annuaire .card-body {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf">
<div class="col-md-12">
<div class="row azer">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

You need to remove margin right from .card-annuaire Like this:
.card-annuaire {
background:green;
border:0;
border-radius: 0;
.card-body {
text-align: center;
}
Update
If you margin on both sides then you can do:
.card-annuaire {
background:green;
border:0;
border-radius: 0;
margin:0 1rem;
.card-body {
text-align: center;
}
.azer {
background: red;
}
.card-annuaire {
background:green;
border:0;
border-radius: 0;
margin:0 1rem;
.card-body {
text-align: center;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-12">
<div class="qsdf" >
<div class="azer">
<div class="col-md-12">
<div class="row g-0">
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
<div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
<div class="card card-annuaire mb-4">
<div class="card-body">
<div class="card-text entry-content"><img src="https://picsum.photos/100" />
</div><!-- /.card-text -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>