Bootstrap 5 Position
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> <!-- CSS only --> <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> <!-- CSS only --> <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/
Please Login to comment...