bootstrap-utilitieslisted
Install: claude install-skill ronnieiscoo/bootstrap-expert
# Bootstrap 5.3 Utilities
Bootstrap provides extensive utility classes for rapid styling without custom CSS. These are generated via the Utilities API and can be customized.
## Spacing Utilities
### Margin (m-) and Padding (p-)
```html
<!-- All sides -->
<div class="m-3">Margin 1rem all sides</div>
<div class="p-3">Padding 1rem all sides</div>
<!-- Specific sides -->
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left in LTR)</div>
<div class="me-3">Margin end (right in LTR)</div>
<div class="mx-3">Margin horizontal (left + right)</div>
<div class="my-3">Margin vertical (top + bottom)</div>
<!-- Same pattern for padding: pt-, pb-, ps-, pe-, px-, py- -->
<div class="px-3 py-2">Horizontal padding 1rem, vertical 0.5rem</div>
```
### Spacing Scale
| Class | Size |
|-------|------|
| `{m\|p}-0` | 0 |
| `{m\|p}-1` | 0.25rem (4px) |
| `{m\|p}-2` | 0.5rem (8px) |
| `{m\|p}-3` | 1rem (16px) |
| `{m\|p}-4` | 1.5rem (24px) |
| `{m\|p}-5` | 3rem (48px) |
| `{m\|p}-auto` | auto (margin only) |
### Responsive Spacing
```html
<div class="mt-0 mt-md-3 mt-lg-5">
No margin, 1rem on md, 3rem on lg+
</div>
```
### Gap Utilities (Flexbox/Grid)
```html
<div class="d-flex gap-3">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
</div>
<!-- Row and column gaps -->
<div class="d-grid gap-0 row-gap-3 c