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: static;`
position-relative	Positioned relative to its normal position `position: relative;`
position-absolute	Positioned relative to the nearest positioned ancestor `position: absolute;`
position-fixed	Positioned relative to the viewport. `position: fixed;`
position-sticky	Toggles between relative and fixed, based on scroll position `position: sticky;`

Offset Utilities:

Combine position classes with offset utilities to fine-tune the element's placement.

Class	Description
top-0	Top edge at 0% `(top: 0)`
top-50	Top edge at 50% `(top: 50%)`
top-100	Top edge at 100% `(top: 100%)`
start-0	Left edge at 0% `(left: 0)`
start-50	Left edge at 50% `(left: 50%)`
start-100	Left edge at 100% `(left: 100%)`
bottom-0	Bottom edge at 0% `(bottom: 0)`
bottom-50	Bottom edge at 50% `(bottom: 50%)`
bottom-100	Bottom edge at 100% `(bottom: 100%)`
end-0	Right edge at 0% `(right: 0)`
end-50	Right edge at 50% `(right: 50%)`
end-100	Right edge at 100% `(right: 100%)`

Static Example

This div element has position: static;

</div>

Try it yourself

Relative Example

This div element has position: relative;

</div>

Try it yourself

Absolute Example

Top-Left Corner

</div>

Try it yourself

Fixed Example

<div class="position-fixed bottom-0 end-0 border border-2 border-primary">This div element has position: fixed;</div>

Try it yourself

Sticky Example

<div class="position-sticky top-0 border border-2 border-primary">This div element has position: sticky;</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Class

Description

Offset Utilities:

Class

Description