Skip to main content

Footer at bottom - full height layout

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

Updated 1 min readMarkdown
Footer at bottom - full height layout
<!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/>
    &copy; 2022 Bootstrap
</footer>

</body>

</html>

footer-bottom.png

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

No comments yet. Be the first to comment.