Open In App

Bootstrap 5 Position

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

  1. Position values: These are quick positioning classes that are not responsive.
  2. Arrange elements: Arrange elements with edge positioning utilities with format {property-position}.
  3. 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.
  4. 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/



Last Updated : 09 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads