Transform
The Transform Utilities extend Bootstrap by providing highly customizable rotate, skew, and flip transforms using simple utility classes — fully configurable via Sass maps.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Type | Class Format | Description |
|---|---|---|
| Rotate | .al-rotate-{value} / .al-rotate-n-{value} | Rotate transform (degrees) |
| Skew | .al-skew-{value} / .al-skew-n-{value} | Skew transform (degrees) |
| Skew X | .al-skew-x-{value} / .al-skew-x-n-{value} | Skew X axis transform |
| Skew Y | .al-skew-y-{value} / .al-skew-y-n-{value} | Skew Y axis transform |
| Flip Horizontal | .al-flip-x | scaleX(-1) |
| Flip Vertical | .al-flip-y | scaleY(-1) |
Sass Reference
assets/scss/_transform.scss
Copy
Class Usage Reference
| Class | Output |
|---|---|
| .al-rotate-1 | rotate(45deg) |
| .al-rotate-n-3 | rotate(-180deg) |
| .al-skew-2 | skew(90deg) |
| .al-skew-n-2 | skewY(-90deg) |
| .al-skew-x-3 | skewX(180deg) |
| .al-skew-x-n-1 | skewX(-45deg) |
| .al-skew-y-4 | skewY(270deg) |
| .al-skew-y-n-3 | skewY(-180deg) |
| .al-flip-x | scaleX(-1) |
| .al-flip-y | scaleY(-1) |
Examples
Rotate
Rotate 90°
Rotate -180°
Copy
Rotate 90°
Rotate -180°
Skew
Skew 45°
SkewX 180°
SkewY -90°
Copy
Skew 45°
SkewX 180°
SkewY -90°
Flip (Mirror)
Horizontal
Flip X
Vertical
Flip Y
Copy
Flip X
Flip Y
Developer Notes
-
Full control over transform system using $transform-sizes Sass map
-
Supports both positive and negative transform utilities
-
Flip mirrors content horizontally or vertically via scale transforms