Tengo el siguiente código elaborado con Bootstrap 5 y funciona bien sin el gap-3
, al agregarlo no logro lo que requiero:
<div class="container my-5">
<div class="d-flex flex-wrap gap-3">
<div class="card col-xl-3 col-md-6 col-lg-4 col-12">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<div class="card col-xl-3 col-md-6 col-lg-4 col-12">
<div class="card-body">
This is some text within a card body 2.
</div>
</div>
<div class="card col-xl-3 col-md-6 col-lg-4 col-12">
<div class="card-body">
This is some text within a card body 3.
</div>
</div>
<div class="card col-xl-3 col-md-6 col-lg-4 col-12">
<div class="card-body">
This is some text within a card body 4.
</div>
</div>
<div class="card col-xl-3 col-md-6 col-lg-4 col-12">
<div class="card-body">
This is some text within a card body 5.
</div>
</div>
<div class="card col-xl-3 col-md-6 col-lg-4 col-12">
<div class="card-body">
This is some text within a card body 6.
</div>
</div>
</div>
</div>
Si le quito el gap-3
se muestra como deseo según el tamaño de la pantalla, pero requiero darle espacios entre una card
y otra.