Bootstrap 5 Position Arrange Elements
Last Updated :
15 Dec, 2022
Bootstrap 5 Position Arrange elements are used to arrange the elements easily with the edge. The position specifies the type of positioning method used for an element static, relative, etc. With the help of position arrange elements adjusted the position of elements.
Position Arrange elements used classes:
- top-*: This class is used to arrange the elements in the vertical direction using the top of the parent as a reference.
- start-*: This class is used to arrange the elements in the horizontal direction using the left of the parent as a reference.
- bottom-*: This class is used to arrange the elements in the vertical direction using the bottom of the parent as a reference.
- end-*: This class is used to arrange the elements in the horizontal direction using the right of the parent as a reference.
Note: The * Can be replaced by one of these values 0, 50,100 for 0 edge position, for 50% edge position, and for 100% edge position respectively.
Syntax:
<div class="position-relative">
<button type="button" class="position-absolute top-* start-*">
...
</button>
</div>
Example 1: In this example, we arrange the elements with edges in the vertical and horizontal direction using position-absolute top-0 start-0, position-absolute top-0 end-0, and position-absolute bottom-50 start-50 classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class = "container text-center " >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h5 >
Bootstrap 5 Position Arrange elements
</ h5 >
< div class = "border p-5 bg-light position-relative" >
< button type = "button"
class="btn btn-success position-absolute
top-0 start-0">
Message
</ button >
< button type = "button"
class="btn btn-success position-absolute
top-0 end-0">
Email
</ button >
< button type = "button"
class="btn btn-success position-absolute
top-50 start-50">
Notification
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we arrange the elements with edges in the vertical and horizontal direction using position-absolute top-50 end-0, position-absolute bottom-0 start-0, and position-absolute bottom-0 end-0 classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class = "container text-center " >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h5 >
Bootstrap 5 Position Arrange elements
</ h5 >
< div class = "border p-5 bg-light position-relative" >
< button type = "button"
class="btn btn-success position-absolute
bottom-50 end-50">
Science portal
</ button >
< button type = "button"
class="btn btn-success position-absolute
bottom-0 start-0">
Write gfg
</ button >
< button type = "button"
class="btn btn-success position-absolute
bottom-0 end-0">
Hello geeks
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/position/#arrange-elements
Share your thoughts in the comments
Please Login to comment...