How to stick a div at the bottom left of the screen using Bootstrap5 ?

Last Updated : 21 Nov, 2023

In this article, we will see how to stick a div element in the bottom left of the screen using Bootstrap 5 utility classes. Bootstrap is a famous front-end framework used for developing websites. Bootstrap provides a collection of built-in design components, and styles for making the design easier.

Syntax

<div class="fixed-bottom p-3 start-0 ">
        <!-- Content of the div -->
</div>

Approach

First, we need to link Bootstrap 5 to our webpage. We can do this in two ways either by downloading locally or by including CDN in html file.
Make a basic structure of the web page using HTML.
Here, we use the bootstrap utility class fixed-bottom to stick a div at the bottom left of the screen. It sticks at the left side of the web page on all screen sizes.
There are more Bootstrap utility classes for giving style to the web page.

Example: This example illustrates sticking a div at the bottom left of the screen with the help of a fixed-bottom utility class in Bootstrap 5.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 
    <title>Bottom Left Div</title> 
</head> 
  
<body> 
    <h1 class="text-center m-5 text-success"> 
        GeeksforGeeks 
    </h1> 
    <p class="fs-3 text-success text-center p-1"> 
        This is just a demo webpage to show how to stick 
        a div in the bottom left only using bootstrap 
    </p> 
    <div class="fixed-bottom  
                p-3 start-0 bg-primary 
                 col-md-5 col-lg-3 col-8 m-2"> 
        <h3 class="text-light"> 
            This div is sticked in bottom-left 
        </h3> 
    </div> 
</body> 
  
</html>