Bootstrap 5 Footer
A website footer is the section at the bottom of every page containing navigation links, legal information, contact details, and brand elements. Bootstrap 5 has no dedicated footer component — footers are built using the grid system, flexbox utilities, and styling classes.
Primary Class
footer (HTML5 semantic element + Bootstrap grid)Common Use Cases
- →Multi-column site navigation footer
- →Dark branded footer with logo
- →Minimal one-row footer for landing pages
- →Footer with newsletter signup
- →Footer with social media links
Variants & Classes
| Variant | Description |
|---|---|
| 4-column grid footer | Four columns: brand, product links, resource links, legal. |
| Dark footer | Dark background with white/muted text and links. |
| Minimal footer | Single row with copyright and a few links. |
| Footer with newsletter | Column with email subscribe form alongside link columns. |
Code Example
<footer class="border-top bg-dark text-white pt-5 pb-4">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<a href="/" class="text-white fw-bold fs-5 text-decoration-none">Brand</a>
<p class="text-white-50 small mt-3">Production-ready HTML in minutes.</p>
</div>
<div class="col-6 col-md-2">
<h6 class="fw-bold mb-3">Product</h6>
<ul class="list-unstyled small text-white-50">
<li class="mb-2"><a href="/generate" class="text-white-50 text-decoration-none hover-white">Generate</a></li>
<li class="mb-2"><a href="/pricing" class="text-white-50 text-decoration-none">Pricing</a></li>
</ul>
</div>
<div class="col-6 col-md-2">
<h6 class="fw-bold mb-3">Legal</h6>
<ul class="list-unstyled small text-white-50">
<li class="mb-2"><a href="/privacy" class="text-white-50 text-decoration-none">Privacy</a></li>
<li class="mb-2"><a href="/terms" class="text-white-50 text-decoration-none">Terms</a></li>
</ul>
</div>
</div>
<div class="border-top border-white border-opacity-10 mt-5 pt-4 d-flex justify-content-between small text-white-50">
<span>© 2026 Brand Inc.</span>
<span>Built with Canvas Builder</span>
</div>
</div>
</footer>Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓5-column mega footer with icon links
- ✓Minimal single-row footer with social icons
- ✓Footer with large newsletter CTA section above link columns
- ✓Light footer with brand colour accents
- ✓Footer with map embed column
Best Practices
Include all primary pages in the footer
Google uses footer links to understand site structure and ensure key pages are crawlable. Include links to all important pages — blog, tools, about, contact — even if they're in the main navigation.
Keep footer link columns shallow
3–6 links per column is the optimal range. Too many links make the footer feel cluttered; too few waste the space. Group logically — Product, Resources, Company, Legal.
Use border-opacity utilities for subtle dividers
Bootstrap 5's border-opacity-10 or border-opacity-25 creates subtle dividers in dark footers without harsh contrast. border-top border-white border-opacity-10 produces a barely-visible separator.