Bootstrap 5 Position Center elements
Last Updated :
30 Nov, 2022
Bootstrap 5 Position Center elements facilitate aligning the elements to the absolute center by implementing the transform utility class .translate-middle, which implements the transformations translateX(-50%) & translateY(-50%) to the element, along with combining the edge positioning utilities. Bootstrap 5 provides the 3 different transform utility classes that help to align the elements to the center.
Position Center elements Classes:
- translate-middle: This class is used to align the element to the center.
- translate-middle-x: This class is used to position the element only in a horizontal direction.
- translate-middle-y: This class is used to position the element only in a vertical direction.
Syntax:
<div class="position-relative">
...
</div>
Example 1: This example describes the Bootstrap Position Center Elements by implementing classes like position-absolute top-50 start-50 translate-middle.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap 5 Position Center elements</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" />
</ head >
< body >
< h1 class = "text-center text-success" >
GeeksforGeeks
</ h1 >
< h3 class = "text-center" >
Bootstrap 5 Position Center elements
</ h3 >
< div class = "position-absolute top-50 start-50 translate-middle" >
GeeksforGeeks
</ div >
</ body >
</ html >
|
Output:
Example 2: This example describes the use of the Position Center elements in Bootstrap5, by implementing the .translate-middle, .translate-middle-x, & .translate-middle-y classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Bootstrap 5 Position Center elements</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" />
</ head >
< body >
< h1 class = "text-center text-success" >
GeeksforGeeks
</ h1 >
< h3 class = "text-center" >
Bootstrap 5 Position Center elements
</ h3 >
< div class = "position-absolute top-50 start-50 translate-middle" >
translate-middle
</ div >
< div class = "position-absolute top-50 start-100 translate-middle-x" >
translate-middle-x
</ div >
< div class = "position-absolute top-50 start-0 translate-middle-y" >
translate-middle-y
</ div >
</ body >
</ html >
|
Output:
References: https://getbootstrap.com/docs/5.0/utilities/position/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...