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.

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

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

--#{$prefix}footer-min-height: #{$footer-min-height};
--#{$prefix}footer-padding-x: #{$footer-padding-x};
--#{$prefix}footer-padding-y: #{$footer-padding-y};
--#{$prefix}footer-color: #{$footer-color};
--#{$prefix}footer-bg: #{$footer-bg};
--#{$prefix}footer-border-color: #{$footer-border-color};
--#{$prefix}footer-border: #{$footer-border-width} solid var(--#{$prefix}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);