Bootstrap 5 Position
Last Updated :
26 Apr, 2024
 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:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS only -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-center text-success">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Position
</h2>
<br>
<div class="position-absolute
top-0 start-0">
Hello Geeks
</div>
<div class="position-absolute
top-0 end-0">
Be Hungry
</div>
<div class="position-absolute
top-50 start-50">
Be Consistent
</div>
<div class="position-absolute
bottom-50 end-50">
Motivated
</div>
<div class="position-absolute
bottom-0 start-0">
And
</div>
<div class="position-absolute
bottom-0 end-0">
Never Settle
</div>
</body>
</html>
Output:
Example 2: The following code demonstrates Bootstrap Position using various classes:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS only -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-center
text-success">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Position
</h2>
<br>
<div>
<div class="position-relative m-4">
<div class="progress">
<div class="progress-bar" role="progressbar">
</div>
</div>
<button type="button" class="position-absolute
top-0 start-0 translate-middle btn btn-sm
btn-dark rounded-pill">
A
</button>
<button type="button" class="position-absolute
top-0 start-50 translate-middle
btn btn-sm btn-warning rounded-pill">
B
</button>
<button type="button" class="position-absolute
top-0 start-100
translate-middle btn btn-sm
btn-secondary rounded-pill">
C
</button>
<button type="button" class="position-absolute
top-50 end-50 translate-middle
btn btn-sm btn-danger
rounded-pill">
D
</button>
</div>
</div>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...