Open In App

Bootstrap 5 Position Values

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 facilitates different Position values, ie. the top, right, bottom, and left property values which can be used to position an element. These define the separation between an HTML element and the viewport’s edge. We must declare the positioning technique in order to set the position using these four properties. There are five different types of position properties available in CSS which are Fixed, Static, Relative, Absolute, and Sticky. We can use Bootstrap helper classes to implement all the position properties.

Bootstrap 5 Position value Classes:

  • position-static: This class when added to an element sets its position to be static. This means that the top, right, bottom, and left properties will be the same no matter what.
  • position-relative: This class when added to an element sets its position to be relative with respect to the elements on top of it, which means that the top, right, bottom, and left properties will affect the position of the elements.
  • position-absolute: This class when added to an element sets its position relative to the closest parent and it set its position absolute with that, which means that the top, right, bottom, and left properties will get adjusted with respect to the nearest ancestor and then the position is set. 
  • position-fixed: This class when added to an element sets its position to be relative with respect to the viewport and it will stay in the same place if the page is scrolled, which means that the top, right, bottom, and left properties will be adjusted to set the position of the element and it will then stay that way.
  • position-sticky: This class when added to an element sets its position either relative or fixed with respect to the scroll position. It is in a relative position until a predetermined offset position is reached in the viewport, at which point it “sticks” there.

Syntax:

<div class="position-values">
    ...
</div>

 

Example 1: The example below demonstrates the usage and implementation of the position-static, position-relative, and position-absolute classes.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
</head>
  
<body class="m-2">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4 class="mb-4">
        Bootstrap 5 Position values
    </h4>
  
    <div class="container mt-4 bg-light">
        Position: sticky is means that the top, right,
        bottom, and left properties will be the same no matter
        <p class="position-static bg-success top-50 
            start-50 text-light">
            This paragraph has position: static;
        </p>
        This part is out of the paragraph.
    </div>
  
    <div class="container mt-4 bg-light">
        Position: relative sets its position to be relative
        with respect to the elements on top of it
        <p class="position-relative bg-success top-50 
            start-50 text-light w-50">
            This paragraph has position: relative;
        </p>
        This means that the top, right, bottom, and
        left properties will
        affect the position of the Paragraph.
    </div>
  
    <div class="container mt-4 bg-light">
        Position: absolute sets its position relative to
        the closest parent and it set its position absolute
        with that
        <p class="position-absolute bg-success bottom-0 
            end-50 text-light">
            This paragraph has position: absolute;
        </p>
        This means that the top, right, bottom, and left
        properties will get adjusted with respect to the
        nearest ancestor and then the position is set.
    </div>
</body>
  
</html>


Output:

 

Example 2: The example below demonstrates the usage and implementation of the position-sticky and position-fixed classes. In the output given you can clearly see how the fixed position means the element will have a fixed positioning with respect to the viewport. But the sticky positioning means the element will have a fixed positioning with respect to the parent element which in this case is the HTML div element with the “container” class.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
</head>
  
<body class="m-2">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4 class="mb-4">
        Bootstrap 5 Position values
    </h4>
    <div class="container mt-4 bg-light position-relative" 
         style="height:120rem;">
        <div class="position-sticky bg-success m-4 text-light 
            start-50 top-0">
            This div element has position: sticky
        </div>
        <div class="border border-success border-2 m-4">
            This div element has default position
        </div>
        <div class="position-fixed bg-warning start-50 
            top-0">
            This div element has position: fixed
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/utilities/position/#position-values 



Last Updated : 07 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads