Bootstrap 5 Position is used to set an element’s Position, Bootstrap 5 offers a variety of classes. Although they are available, quick positioning classes are not responsive.
- Position values: These are quick positioning classes that are not responsive.
- Arrange elements: Arrange elements with edge positioning utilities with format {property-position}.
- Center elements: The transform utility class allows you to center the pieces using class .translate-middle. When used with the edge positioning tools, this class’s application of the transformations translateX (-50%) and translateY (-50%) to the element enables absolute element centering.
- Sass:
- Maps: In Maps, the default position utility values are declared.
- Utilities API: The position utilities are declared in our utility API.
Example 1: The following code demonstrates Bootstrap Position using various classes:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
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 >
< link href =
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:
References: https://getbootstrap.com/docs/5.0/utilities/position/
Last Updated :
09 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...