Bootstrap 5 Position Fixed top

Last Updated : 07 Nov, 2022

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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>