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 components?
Asked on Feb 01, 2026
Answer
To customize the default spacing between Bootstrap card components, you can use Bootstrap's utility classes for margin and padding. Here's a simple example to adjust the spacing between two cards using margin utilities.
<!-- BEGIN COPY / PASTE -->
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This is the first card.</p>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This is the second card.</p>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `mb-4` class adds a bottom margin of 1.5rem to each card, creating space between them.
- You can adjust the number in `mb-4` to any value from 0 to 5 to increase or decrease the spacing.
- Use `mt-*`, `ml-*`, or `mr-*` for top, left, or right margins, respectively, if needed.
Recommended Links:
