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.
Bootstrap class
No dedicated Bootstrap class
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 and classes
| Variant | Description and classes |
|---|---|
| 4-column grid footer | Four columns: brand, product links, resource links, legal.container + row row-cols-2 row-cols-md-4 |
| Dark footer | Dark background with white/muted text and links.bg-dark text-white |
| Minimal footer | Single row with copyright and a few links.border-top py-4 + d-flex justify-content-between |
| Footer with newsletter | Column with email subscribe form alongside link columns.row + col-lg-4 + input-group |
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="/chat" 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>Live examples
Multi-Column Footer
4-column footer with logo, links, newsletter signup, and social icons.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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 to 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.