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% |