Bootstrap 5 Position Fixed top Last Updated : 07 Nov, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Position Fixed top is used to set the position of the element to the top of the viewport. We can use some CSS property to display the effect of position fixed top. Position Fixed Top Class: fixed-top: This class is used to set the position of the element to the top of the viewport. Syntax: <div class="fixed-top"> Content </div> Example 1: In this example, we will create a div element of fixed width and height, and set its position to fixed top. HTML <!DOCTYPE html> <html> <head> <title>Bootstrap 5 Position Fixed top</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <style> .container { margin-top: 150px; } .box { width: 250px; height: 100px; border: 1px solid #312d2d; margin: 0 auto; } </style> </head> <body> <div class="container text-center"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Bootstrap 5 Position Fixed top</h3> <div class="box fixed-top"></div> </div> </body> </html> Output: Example 2: In this example, we will create an image element of fixed width and height, and set its position to fixed top. HTML <!DOCTYPE html> <html> <head> <title>Bootstrap 5 Position Fixed top</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> <style> .container { margin-top: 250px; } img { margin: auto; } </style> </head> <body> <div class="container text-center"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Bootstrap 5 Position Fixed top</h3> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" class="fixed-top" alt="GFG Logo"> </div> </body> </html> Output: Reference: https://getbootstrap.com/docs/5.0/helpers/position/#fixed-top Comment More infoAdvertise with us Next Article Bootstrap 5 Position Values A ashokjaiswal Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Similar Reads Bootstrap 5 Position Fixed bottom Bootstrap 5 Position Fixed bottom is used to set the position of the element to the bottom of the viewport. We can use some CSS property to display the effect of position fixed bottom. Position Fixed Bottom Class: fixed-bottom: This class is used to set the position of the element to the bottom of t 2 min read Bootstrap 5 Position Bootstrap 5 Position offers utility classes to control the positioning of elements. It includes classes like "position-static," "position-relative," "position-absolute," etc., facilitating precise element positioning on web pages for improved layout and design control.NameDescriptionposition-staticD 2 min read Bootstrap 5 Position Sticky Top Bootstrap 5 position-sticky class fixes an element at the top of the viewport when scrolling down. If not fully supported, alternatives like `position: fixed` or JavaScript solutions can mimic the sticky effect. Position Sticky Top Class: sticky-top: This class is used to set the position of the ele 2 min read Bootstrap 5 Position Values Bootstrap 5 Position Values offers position utilities for defining the position of elements relative to the viewport's edge. It supports Fixed, Static, Relative, Absolute, and Sticky positioning, providing helper classes for easy implementation of these properties.Bootstrap 5 Position value Classes: 3 min read Bootstrap 5 Grid system options Bootstrap 5 Grid System Options is a responsive grid system that allows you to create flexible and dynamic layouts for your website. The grid system options are flexible enough to respond to both the six built-in breakpoints and any custom ones.Grid System Options Classes:.col: This is the base clas 4 min read Explain Bootstrap 4 Positions Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compati 8 min read Like