Open In App

Bootstrap 5 Position Responsive Sticky Top

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Position Sticky top is used to set the element’s position to the sticky top of the viewport when the user scrolls down. The Position Responsive Sticky Top feature allows adding responsiveness to the webpage. We can use some CSS property to display the effect of position fixed bottom.

Position Responsive Sticky Top:

  • sticky-top: This class is used to make the div sticky on the top and does not matter the screen size.
  • sticky-*-top: This class is used to set the element’s position to the sticky top of the viewport when users scroll down the page for screens.

Note: * can be replaced with sm, md, lg, and top to specify the screen size.

 

Syntax:

<div class="sticky-sm/md/lg/xl-top">
    ...
</div>

Example 1: The following code demonstrates the Responsive Sticky Top feature of the small and medium screens using the Sticky Top Bootstrap 5 properties.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
         rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous">
    </script>
</head>
  
<body class="m-2">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
      
    <h2>Bootstrap 5 Position Responsive Sticky Top</h2>
      
    <img class="sticky-sm-top" height="400px" src=
    <br>
  
    <img height="400px" src=
    <br>
  
    <img class="sticky-md-top" height="400px" src=
    <br>
  
    <img height="400px" src=
    <br>
  
    <img height="400px" src=
    <br>
  
    <img height="400px" src=
    <br>
</body>
  
</html>


Output:

 

Example 2: The following code demonstrates the Responsive Sticky Top feature of the large and extra large screen using the Sticky Top Bootstrap 5 properties.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
         rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous">
    </script>
</head>
  
<body class="m-2">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
      
    <h2>
        Bootstrap 5 Position Responsive Sticky
        Top for Large and Extra Large Screen
    </h2>
  
    <img class="sticky-lg-top" height="400px"
        src=
    <br>
  
    <img height="400px" src=
    <br>
  
    <img class="sticky-xl-top" height="400px"
        src=
    <br>
  
    <img height="400px" src=
    <br>
  
    <img height="400px" src=
    <br>
  
    <img height="400px" src=
    <br>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top



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