What utility classes can I use to adjust the spacing between Bootstrap grid items?
Asked on Oct 31, 2025
Answer
In Bootstrap 5, you can use spacing utility classes to adjust the spacing between grid items. These classes allow you to control the margin and padding of elements easily.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="row g-3">
<div class="col">
<div class="p-3 border bg-light">Grid Item 1</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Grid Item 2</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Grid Item 3</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `g-3` class is used to add a gap between grid items. You can adjust the number to increase or decrease the spacing (e.g., `g-1`, `g-2`, `g-4`, etc.).
- The `p-3` class adds padding inside each grid item. You can change the number to modify the padding size.
- These utility classes are part of Bootstrap's responsive design, allowing for easy customization of spacing across different screen sizes.
Recommended Links: