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 Apr 29, 2026
Answer
To customize the default spacing between Bootstrap card elements, you can use Bootstrap's utility classes or custom CSS to adjust the margins and padding. Here's a simple example using utility classes to modify the spacing.
<!-- 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 class="card-footer mt-3">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- You can adjust the spacing using Bootstrap's margin utility classes like `mt-3` for top margin or `mb-3` for bottom margin.
- Replace `mt-3` with any other spacing class such as `mt-1`, `mt-2`, etc., to increase or decrease the space.
- Custom CSS can also be used if more specific spacing is needed.
Recommended Links:
