How to stick a div at the bottom left of the screen using Bootstrap5 ?
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" > w3wiki </ 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 > |
Output:
Contact Us