Bootstrap 5 Footer

Footer

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.

🤖 Looking for the LLM-optimized version? View llm.md

Available in Other JavaScript Frameworks

CoreUI Footer components are available as native Angular, React, and Vue components. Explore framework-specific implementations below:

On this page

How it works

Here’s what you need to know before getting started with the aside menu:

Bootstrap footer requires a wrapping .footer.

Examples

html

<footer class="footer">
  <div>
    <a href="https://coreui.io">CoreUI</a>
    <span>&copy; 2022 creativeLabs.</span>
  </div>
  <div>
    <span>Powered by</span>
    <a href="https://coreui.io">CoreUI</a>
  </div>
</footer>

Customizing

CSS variables

Sidebars use local CSS variables on .footer for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss/_footer.scss

--cui-footer-min-height: #{$footer-min-height};
--cui-footer-padding-x: #{$footer-padding-x};
--cui-footer-padding-y: #{$footer-padding-y};
--cui-footer-color: #{$footer-color};
--cui-footer-bg: #{$footer-bg};
--cui-footer-border-color: #{$footer-border-color};
--cui-footer-border: #{$footer-border-width} solid var(--cui-footer-border-color);

SASS variables

scss/_variables.scss

$footer-min-height:    3rem;
$footer-padding-y:     $spacer * .5;
$footer-padding-x:     $spacer;
$footer-bg:            var(--#{$prefix}tertiary-bg);
$footer-color:         var(--#{$prefix}body-color);
$footer-border-width:  var(--#{$prefix}border-width);
$footer-border-color:  var(--#{$prefix}border-color);