Advertisement
Google Ad Slot: content-top
Bootstrap 5 Position
Bootstrap 5 offers position utilities to control the layout and positioning of elements. These utilities are built on CSS positioning properties and provide flexibility for both static and dynamic layouts.
Class |
Description |
|---|---|
position-static |
Default positioning (no special positioning) |
position-relative |
Positioned relative to its normal position |
position-absolute |
Positioned relative to the nearest positioned ancestor |
position-fixed |
Positioned relative to the viewport. |
position-sticky |
Toggles between relative and fixed, based on scroll position |
Offset Utilities:
Combine position classes with offset utilities to fine-tune the element's placement.
Class |
Description |
|---|---|
top-0 |
Top edge at 0% |
top-50 |
Top edge at 50% |
top-100 |
Top edge at 100% |
start-0 |
Left edge at 0% |
start-50 |
Left edge at 50% |
start-100 |
Left edge at 100% |
bottom-0 |
Bottom edge at 0% |
bottom-50 |
Bottom edge at 50% |
bottom-100 |
Bottom edge at 100% |
end-0 |
Right edge at 0% |
end-50 |
Right edge at 50% |
end-100 |
Right edge at 100% |