Bootstrap Footer is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
Available in Other JavaScript Frameworks
CoreUI Bootstrap 6 Footer is also available for Angular, React, and Vue. Explore framework-specific implementations below:
Basic example
The footer component is dropped in version v6 as it can be replicated with utilities. Please check examples of how to build a page footer out of layout, spacing, background, and border utilities.
<footer class="d-flex flex-wrap align-items-center justify-content-between bg-3 border-top px-4 py-3">
<div>
<a href="https://coreui.io">CoreUI</a>
<span>© 2026 creativeLabs.</span>
</div>
<div>
<span>Powered by</span>
<a href="https://coreui.io">CoreUI</a>
</div>
</footer>Pinning the footer
.sticky-bottom keeps the footer at the bottom of the viewport while the rest of the page scrolls, and .fixed-bottom takes it out of the flow entirely. Both replace what .footer-sticky and .footer-fixed used to do.
Custom Bootstrap footers
Swap the background and border utilities to change the look, or drop them entirely for a footer that sits flush with the page.
<footer class="d-flex flex-wrap align-items-center justify-content-between gap-4 bg-black fg-white px-4 py-5" data-coreui-theme="dark">
<div>
<a href="https://coreui.io">CoreUI</a>
<span>© 2026 creativeLabs.</span>
</div>
<ul class="list-unstyled d-flex gap-4 mb-0">
<li><a href="#">Docs</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Support</a></li>
</ul>
</footer>