Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I create a sticky footer using Bootstrap's grid system?
Asked on Apr 16, 2026
Answer
To create a sticky footer using Bootstrap's grid system, you can utilize Bootstrap's container and row classes to structure your layout. The sticky footer will remain at the bottom of the viewport if the content is short, or below the content if it is longer.
<!-- BEGIN COPY / PASTE -->
<div class="d-flex flex-column min-vh-100">
<header class="bg-primary text-white p-3">
Header
</header>
<main class="flex-fill">
<div class="container">
<div class="row">
<div class="col">
Main content goes here.
</div>
</div>
</div>
</main>
<footer class="bg-dark text-white text-center p-3 mt-auto">
Sticky Footer
</footer>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `d-flex` and `flex-column` classes create a flexbox container that arranges its children in a column.
- `min-vh-100` ensures the container takes at least the full height of the viewport.
- `flex-fill` allows the main content to expand and fill the available space.
- `mt-auto` on the footer pushes it to the bottom of the viewport or below the content if it overflows.
- Customize the header, main, and footer sections as needed with additional Bootstrap classes.
Recommended Links:
