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 May 28, 2026
Answer
To customize the default spacing between Bootstrap card elements, you can use Bootstrap's utility classes to adjust margins and padding. These classes allow you to control the spacing without modifying the core CSS.
<!-- 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>
<style>
.card-body {
margin-top: 1rem; /* Adjust top margin */
margin-bottom: 1rem; /* Adjust bottom margin */
}
.card-title {
margin-bottom: 0.5rem; /* Adjust bottom margin */
}
.card-text {
margin-bottom: 1rem; /* Adjust bottom margin */
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Use Bootstrap's margin utility classes (e.g., `mt-3`, `mb-3`) to adjust spacing without custom CSS.
- The example uses inline CSS for demonstration; consider using a separate stylesheet for larger projects.
- Adjust the values as needed to fit your design requirements.
Recommended Links:
