Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I customize the default spacing between Bootstrap card elements?
Asked on Feb 24, 2026
Answer
To customize the default spacing between Bootstrap card elements, you can use Bootstrap's utility classes for spacing. These classes allow you to adjust margins and paddings easily.
<!-- BEGIN COPY / PASTE -->
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- Example of adding custom spacing -->
<div class="card mt-4 mb-4" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">More example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Use Bootstrap's spacing utilities like `mt-4` or `mb-4` to add top or bottom margins to the card.
- The number in the class (`4` in this case) represents the size of the spacing. You can adjust it from `0` to `5` for different spacing sizes.
- You can also use `p-` classes for padding adjustments if needed.
Recommended Links:
