How to create a sticky footer in Bootstrap
Using Flexbox layout, set the html and body height to 100%, and add d-flex, flex-column and min-vh-100 classes to the container; 2. Add flex-grow-1 classes to the main element to occupy the remaining space, thereby pushing footer to the bottom; 3. Footer is naturally at the end of the content, sticking the bottom when short content, and moving down with the document when long content is flowing; this method does not require additional JavaScript or fixed height, is compatible with responsive design and is simple and reliable.
Creating a sticky footer in Bootstrap means making the footer stay at the bottom of the page when the content is short, and naturally push down when the content is long. This is a common layout requirement and can be achieved cleanly using Bootstrap's utility classes and a bit of custom CSS.
Here's how to do it properly:
1. Use a flexbox-based layout
The most reliable way to create a sticky footer with Bootstrap is by using a flexbox layout on the entire page. This ensures the footer sticks to the bottom when content is minimal, without overlapping the main content.
HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sticky Footer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="bg-primary text-white p-3">
<h1>Header</h1>
</header>
<main class="p-3">
<h2>Main Content</h2>
<p>This is the main page content.</p>
</main>
<footer class="bg-dark text-white p-3 text-center">
© 2024 Your Website
</footer>
</div>
</body>
</html>2. Key CSS points explained
html, body { height: 100%; }
This ensures the body takes up the full viewport height, which is required for the flex layout to work properly..wrapper { min-height: 100%; display: flex; flex-direction: column; }
The wrapper covers at least the full height of the viewport and uses a vertical flex layout.
main { flex: 1 0 auto; }
This is the cruel part. It makes the main content area expand to fill any available space, pushing the footer down. Theflex: 1means "take up remaining space."footer { flex-shrink: 0; }
Prevents the footer from shrinking if content is too tall.
3. Why this approach works
- Works in all modern browsers.
- Responsive by default (uses Bootstrap's grid and utilities).
- Doesn't rely on fixed heights or JavaScript.
- Footer stays at the bottom with short content and moves down with long content.
4. Alternative: Using Bootstrap 5's built-in classes (partial)
Bootstrap 5 includes utility classes like d-flex , flex-column , and flex-grow-1 , so you can minimize custom CSS:
<body class="d-flex flex-column min-vh-100">
<header class="bg-primary text-white p-3">
<h1>Header</h1>
</header>
<main class="p-3 flex-grow-1">
<h2>Main Content</h2>
<p>Content goes here.</p>
</main>
<footer class="bg-dark text-white p-3 text-center">
© 2024
</footer>
</body>In this version:
-
min-vh-100= minimum height of 100% viewport height. -
d-flex flex-column= enables vertical flex layout. -
flex-grow-1onmain= makes it expand and push footer down.
This method avoids extra wrapper divs and uses Bootstrap's utility classes effectively.
Basically, use flexbox with flex-grow-1 on the main content, and ensure the body takes full height. It's simple, responsive, and reliable.
The above is the detailed content of How to create a sticky footer in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20522
7
13634
4
How to ensure your Bootstrap site is fully accessible (WCAG)? (Accessibility)
Mar 08, 2026 am 01:25 AM
The Bootstrap component does not automatically add the aria attributes required for complete WCAG. You need to manually complete aria-expanded, role="dialog", aria-labelledby, etc.; the form must be equipped with an explicit label; :focus needs to use :focus-visible to ensure that the keyboard focus is visible; the color contrast must reach 4.5:1.
How to animate Bootstrap components for a more dynamic feel? (Advanced CSS)
Mar 13, 2026 am 01:13 AM
The fade and show classes of Bootstrap5 are only status markers and do not contain animation logic. You need to manually add @keyframes or transitions to achieve fade-in and fade-out; custom components need to configure additional animation rules, and when JS controls the display, the show class must be added with delay to ensure redrawing.
How to integrate Bootstrap with a JavaScript framework like React or Vue? (Integration)
Mar 12, 2026 am 01:22 AM
Only BootstrapCSS should be introduced in React/Vue instead of JS to avoid global style pollution and jQuery dependency; SCSS modules should be imported on demand to reduce the size; interactive functions must be imported with encapsulation libraries (such as react-bootstrap) or ESM; grid classes need to adapt to JSX/Vue syntax, and explicit and implicit classes should be used with SSR with caution.
How to create a professional-looking landing page with Bootstrap? (Project-Based)
Mar 10, 2026 am 12:22 AM
Bootstrap’sdefaultstylingfeelsgenericduetouncustomizedspacing,typography,andcolor—fixableviaCSSvariablesorSass,notdirectedits;avoidfixedwidths,misuseofgridclasses,andrender-blockingassetstoensureresponsivenessandfastLCP.
How to use Bootstrap utility classes to speed up your workflow? (Efficiency)
Mar 11, 2026 am 12:18 AM
Use mt-3 to represent the top margin, mb-3 to represent the bottom margin, and the suffixes t/b/s/e correspond to top/bottom/start/end respectively; ms-auto implements right alignment in the flex container, me-2 replaces the abandoned mr-2, and responsive classes such as mt-md-4 need to have breakpoint prefixes.
How to properly install and set up Bootstrap 5 in your web project? (Getting Started)
Mar 16, 2026 am 12:40 AM
To correctly introduce Bootstrap5, you need to load bootstrap.min.css first, then load bootstrap.bundle.min.js (including Popper), and ensure that the viewport tag exists; after npm installation, you need to manually introduce compiled files in the dist directory. SCSS customization must be preceded by variable declarations, and JS components must be explicitly initialized to avoid jQuery contamination.
How to implement offcanvas menus for mobile navigation in Bootstrap? (Mobile UX)
Mar 15, 2026 am 12:04 AM
Bootstrap5's offcanvas needs to be initialized through the data-bs-toggle="offcanvas" data-bs-target attribute or newbootstrap.Offcanvas(); bootstrap.bundle.min.js must be used, and the button must be added with type="button" to prevent submission. iOS requires overscroll-behavior and the correct DOM position. Manual focus management is required for accessibility.
How to use Bootstrap variables to maintain a consistent color scheme? (Branding)
Mar 14, 2026 am 12:59 AM
The safest way is to redefine Bootstrap's Sass variables (such as $primary, $primary-rgb, $primary-text-emphasis) in advance and introduce them before @import "bootstrap/scss/variables" to ensure that all dependent variables are updated synchronously to avoid compilation failure or style exceptions.
