Footer at bottom - full height layout
Non-sticky footer at bottom when body content is less than the available window height

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Footer at Bottom when content is not page-full</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class="min-vh-100 d-flex flex-column bg-primary">
<header class="p-3 bg-success">
Header<br/>
Content
</header>
<div class="container flex-grow-1 p-0 bg-secondary">
<div class="d-flex">
<div class="p-3 bg-danger">
Left Content
</div>
<div class="flex-grow-1 p-3 bg-warning">
Body<br/>
Content
</div>
</div>
</div>
<footer class="p-3 bg-info">
Footer<br/>
Content<br/>
© 2022 Bootstrap
</footer>
</body>
</html>

About the author
- I am a web developer from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in
Comments
Join the discussionNo comments yet. Be the first to comment.
