Position
The Position Utilities extend Bootstrap with advanced px-based, directional, and responsive positioning classes. Supports LTR/RTL layouts, object centering, and responsive position types via media queries.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Type | Class Format | Description |
|---|---|---|
| Top Position | .al-top-{value} / .al-top-n-{value} | Top offset (px) |
| Bottom Position | .al-bottom-{value} / .al-bottom-n-{value} | Bottom offset (px) |
| Start Position | .al-start-{value} / .al-start-n-{value} | Inline start offset (RTL safe) |
| End Position | .al-end-{value} / .al-end-n-{value} | Inline end offset (RTL safe) |
| Object Centering | .al-object-center | Center both axes |
| Responsive Position | .al-position-{breakpoint}-{type} | Responsive position types |
Sass Reference
assets/scss/_position.scss
Copy
Class Usage Reference
| Class | Output |
|---|---|
| .al-top-10 | top: 10px |
| .al-bottom-n-24 | bottom: -24px |
| .al-start-32 | left: 32px (LTR) / right: 32px (RTL) |
| .al-end-n-48 | right: -48px (LTR) / left: -48px (RTL) |
| .al-object-center | top: 50%; left: 50%; transform: translate(-50%, -50%) |
| .al-position-md-fixed | position: fixed at ≥768px |
Responsive Breakpoints
| Breakpoint | Media Query | Class Format |
|---|---|---|
| sm | ≥575px | .al-position-sm-{type} |
| md | ≥768px | .al-position-md-{type} |
| lg | ≥992px | .al-position-lg-{type} |
| xl | ≥1200px | .al-position-xl-{type} |
| xxl | ≥1400px | .al-position-xxl-{type} |
Examples
Position (Positive)
Top 24px
Bottom 24px
Start 24px
End 24px
Copy
Top 24px
Bottom 24px
Start 24px
End 24px
Position (Negative)
Top -24px
Bottom -24px
Start -24px
End -24px
Copy
Top -24px
Bottom -24px
Start -24px
End -24px
Object Centering
top: 50%; left: 50%; transform: translate(-50%, -50%)
left: 50%; transform: translateX(-50%)
top: 50%; transform: translateY(-50%)
Copy
top: 50%; left: 50%; transform: translate(-50%, -50%)
left: 50%; transform: translateX(-50%)
top: 50%; transform: translateY(-50%)
Responsive Positioning
Absolute at md+
Copy
Absolute at md+
Developer Notes
-
Fully RTL-safe positioning logic
-
Sizes are pixel-based, directly from $sizes list
-
Supports positive/negative utilities for precise offsets
-
Object centering works on absolute/fixed positioned elements
-
Responsive variants allow controlling position per breakpoint
-
Generated with advanced Sass mixins using meta.apply()