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.
<!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.
<!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