Sizing
The Sizing Utilities provide px / rem-based and responsive sizing options to extend Bootstrap's sizing utilities . These classes let you control width, height, or square dimensions with pixel precision, while also adapting responsively to screen sizes.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Type | Class Format | Description |
|---|---|---|
| Fixed Width | .al-w-{value} | Set width using rem |
| Fixed Height | .al-h-{value} | Set height using rem |
| Max Width | .al-mw-{value} | Set max-width using % |
| Max Height | .al-mh-{value} | Set max-height using % |
| Fixed Size | .al-size-{value} | Set width, height, and min-width in rem |
| Responsive Width (%) | .al-w-{breakpoint}-{value} | Set % width at breakpoints |
| Responsive Height Reset | .al-h-{breakpoint}-auto | Reset height to auto below breakpoint |
Fixed Size
Sass maps
assets/scss/_sizing.scss
Copy
Usage Examples
width: 150px
height: 70px
width: 150px
height: 150px
height: 150px
max-width: 75%
max-height: 75%
Copy
width: 150px
height: 70px
width: 150px, height: 150px
max-width: 75%
max-height: 75%
Responsive Width
Apply percentage width based on breakpoints.
| Breakpoint | Media Query | Prefix |
|---|---|---|
| sm | min-width: 575px | .al-w-sm-{value} |
| md | min-width: 768px | .al-w-md-{value} |
| lg | min-width: 992px | .al-w-lg-{value} |
| xl | min-width: 1200px | .al-w-xl-{value} |
| xxl | min-width: 1400px | .al-w-xxl-{value} |
Sass maps
assets/scss/_sizing.scss
Copy
Usage Examples
100% on mobile, 75% on lg+, 50% on xl+
Copy
100% on mobile, 75% on lg+, 50% on xl+
Responsive Height Auto
| Class | Applies Below | Result |
|---|---|---|
| .al-h-sm-auto | max-width: 574px | height: auto |
| .al-h-md-auto | max-width: 767px | height: auto |
| .al-h-lg-auto | max-width: 991px | height: auto |
| .al-h-xl-auto | max-width: 1199px | height: auto |
| .al-h-xxl-auto | max-width: 1399px | height: auto |
Usage Examples
Fixed height (100px) normally, auto on mobile
Copy
Fixed height (100px) normally, auto on mobile
Developer Notes
-
$sizes: defines rem values for width, height, and size
-
$width-sizes: defines percentage values for responsive widths
-
$height-reset-breakpoints: used for responsive height:auto
-
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