What is the best way to use Bootstrap 5 utilities to make a sticky footer that stays at the bottom of the viewport?
Asked on Sep 29, 2025
Answer
To create a sticky footer using Bootstrap 5 utilities, you can use the `d-flex`, `flex-column`, and `mt-auto` classes to ensure the footer sticks to the bottom of the viewport. Here's a simple example:
<!-- 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">
Main content
</main>
<footer class="bg-dark text-white p-3 mt-auto">
Sticky Footer
</footer>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- This layout uses `d-flex` and `flex-column` to create a vertical flexbox container.
- `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` pushes the footer to the bottom of the container.
- This approach is responsive and works well across different screen sizes.
Recommended Links:
← Back to All Questions