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.
<!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.
<!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/