Bootstrap 5 Position Fixed bottom

Last Updated : 07 Nov, 2022

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 the viewport.

Syntax:

<div class="fixed-bottom">
    Content
</div>

Example 1: In this example, we will create a div element of fixed width and height, and set its position to the fixed bottom.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Position Fixed bottom</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> 
        .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 bottom</h3> 
        <div class="box fixed-bottom"></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 the fixed bottom.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Position Fixed bottom</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> 
        img { 
            margin: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>Bootstrap 5 Position Fixed bottom</h3> 
          
        <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            class="fixed-bottom" alt="GFG Logo"> 
    </div> 
</body> 
  
</html>