 |
VOOZH | about |
|
VOOZH | about |
Bootstrap 5 Position offers utility classes to control the positioning of elements. It includes classes like "position-static," "position-relative," "position-absolute," etc., facilitating precise element positioning on web pages for improved layout and design control.
| Name | Description |
|---|---|
| position-static | Default position, The element follows normal document flow, unaffected by positioning. |
| position-relative | Positioned relative to its normal position, can be moved with top, right, bottom, and left. |
| position-absolute | Positioned relative to its nearest positioned ancestor, doesn't affect other elements. |
| position-fixed | Positioned relative to the viewport, stays fixed even if the page is scrolled. |
| position-sticky | Acts like position: relative until it hits a specified threshold, then behaves like fixed. |
| Arrange elements | Edge positioning utilities, format {property-position} for arranging elements. |
| Center elements | Use class .translate-middle with edge positioning to center elements via transformations. |
| Sass | Default position utility values declared in Sass. |
| Maps | Default position utility values declared in Maps. |
| Utilities API | Position utilities declared in the utility API. |
Example 1: The following code demonstrates Bootstrap Position using various classes:
Output:
Example 2: The following code demonstrates Bootstrap Position using various classes:
Output:
