Flex
Flexible layout utilities that help arrange content using gap spacing and alignment with flexbox. These utilities complement Bootstrap's flex system and extend it with more granular spacing controls.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Group | Class Format | Description |
|---|---|---|
| Flex Alignment | .al-flex-center | Centers content both vertically and horizontally |
| Gap | .al-gap-{n} | Sets spacing between flex/grid children using rem units |
Sass Reference
assets/scss/_flex.scss
Copy
Class Usage Reference
| Class | Description |
|---|---|
| .al-flex-center | Aligns items in center both axes |
| .al-gap-20 | Sets gap to 20px |
Examples
Flex Centering
Centered Box
Copy
Centered Box
Gap
gap: 20px
gap: 20px
gap: 20px
Copy
Border Solid
Border Dotted
Border Dotted
Developer Notes
-
Gap spacing is rem-based to match your global sizing system.
-
.al-gap-{n} applies to both flex and grid layouts.
-
.al-flex-center is ideal for quick centering of items using flexbox.
-
Designed to extend Bootstrap's .d-flex, .align-items-* and .justify-content-* classes.