Spacing
The Spacing Utilities extend Bootstrap by introducing highly flexible margin and padding classes, based on your custom rem-based $spacing scale. Responsive variants and RTL logical spacing are fully supported.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Type | Class Format | Description |
|---|---|---|
| Padding | .al-p{side}-{value} | Apply padding in rem |
| Margin | .al-m{side}-{value} | Apply margin in rem |
| Negative Margin | .al-m{side}-n-{value} | Negative margin |
| Logical Padding | .al-ps-{value}, .al-pe-{value} | Logical RTL padding |
| Logical Margin | .al-ms-{value}, .al-me-{value} | Logical RTL margin |
| Responsive Padding | .al-p{side}-{breakpoint}-{value} | Responsive padding |
| Responsive Margin | .al-m{side}-{breakpoint}-{value} | Responsive margin |
Sass Reference
assets/scss/_spacing.scss
Copy
Responsive Breakpoints
| Breakpoint | Media Query | Class Format |
|---|---|---|
| sm | min-width: 575px | .al-pt-sm-16 |
| md | min-width: 768px | .al-mx-md-40 |
| lg | min-width: 992px | .al-py-lg-24 |
| xl | min-width: 1200px | .al-mt-xl-50 |
| xxl | min-width: 1400px | .al-pb-xxl-75 |
Examples
Padding
Padding All Side 1.5rem
Padding Top 1.5rem
Padding Bottom 1.5rem
Padding Top/Bottom 1.5rem
Padding Start 1.5rem
Padding End 1.5rem
Padding Start/End 1.5rem
Copy
Padding All side 1.5rem
Padding Top 1.5rem
Padding Bottom 1.5rem
Padding Top/Bottom 1.5rem
Padding Start 1.5rem
Padding End 1.5rem
Padding Start/End 1.5rem
Margin
Margin All Side 1.5rem
Margin Top 1.5rem
Margin Bottom 1.5rem
Margin Top/Bottom 1.5rem
Margin Start 1.5rem
Margin End 1.5rem
Margin Start/End 1.5rem
Copy
Margin all 1.5rem
Margin Top 1.5rem
Margin Bottom 1.5rem
Margin Top/Bottom 1.5rem
Margin Start 1.5rem
Margin End 1.5rem
Margin Start/End 1.5rem
Negative Margin
Negative Margin Top 1.5rem
Negative Margin Bottom 1.5rem
Negative Margin Top/Bottom 1.5rem
Negative Margin Start 1.5rem
Negative Margin End 1.5rem
Negative Margin Start/End 1.5rem
Copy
Negative Margin Top 1.5rem
Negative Margin Bottom 1.5rem
Negative Margin Top/Bottom 1.5rem
Negative Margin Start 1.5rem
Negative Margin End 1.5rem
Negative Margin Start/End 1.5rem
Responsive Spacing
1.5rem on mobile, 3rem on md+
1.5rem on mobile, 3rem on md+
Copy
1.5rem on mobile, 3rem on md+
1.5rem on mobile, 3rem on md+
Developer Notes
-
$spacing: defines rem values for margin, and padding
-
All utilities are built using Sass loops for scalability and consistency
-
All utilities use !important for priority over Bootstrap defaults
-
Fully responsive and consistent with Bootstrap's grid system