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= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          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= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          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>