Bootstrap 5 Footer Example

Bootstrap 5 footers are built using utility classes rather than a dedicated footer component. This page covers 5 footer layouts — basic, multi-column, dark, minimal and sticky — each ready to drop into any project.

Quick Setup

Footers need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

Class	What It Does
`.py-5`	Vertical padding for footer sections
`.border-top`	Top border separator
`.bg-dark`	Dark background
`.text-muted`	Muted gray text color
`.list-unstyled`	Removes bullets from footer link lists
`.d-flex flex-column`	Required for sticky footer layout
`.flex-grow-1`	Makes main content fill available space
`.mt-auto`	Pushes footer to bottom in flex column
`.min-vh-100`	Minimum full viewport height on wrapper

1. Basic Bootstrap 5 Footer

A simple footer with copyright text and navigation links.

2. Bootstrap 5 Multi-Column Footer

A four-column footer with brand, links, resources and newsletter sections.

3. Bootstrap 5 Dark Footer

A dark footer with logo, links and social icons. Common on agency and SaaS sites.

4. Bootstrap 5 Minimal Footer

A single line footer with centered text. Clean and unobtrusive.

5. Bootstrap 5 Sticky Footer

Footer that sticks to the bottom of the viewport when content is short. Uses min-vh-100 on the page wrapper.

Frequently Asked Questions

How do I make a sticky footer in Bootstrap 5?▲

Wrap your page in a div with d-flex flex-column and min-vh-100. Add flex-grow-1 to the main content area and mt-auto to the footer. This pushes the footer to the bottom when content is short and lets it flow naturally when content is long.

How do I add social icons to a Bootstrap 5 footer?▼

Use Bootstrap Icons or Font Awesome. With Bootstrap Icons add the CDN link then use <i class='bi bi-github'></i> inside anchor tags. Style with font-size and color utilities. Wrap icons in d-flex gap-3 for spacing.

How do I make a Bootstrap 5 footer responsive?▼

Use the Bootstrap grid with col-lg-4 col-md-6 for footer columns. They stack to full width on mobile automatically. Use flex-wrap on flex containers and adjust gap utilities for spacing on small screens.

How do I add a newsletter form to a Bootstrap 5 footer?▼

Add an input group inside a footer column: an email input with form-control and a submit button. Use d-flex gap-2 for layout. For inline layout use input-group class wrapping both the input and button together.

How do I change the Bootstrap 5 footer background color?▼

Use Bootstrap background utilities: bg-dark, bg-light, bg-primary. Or add a custom inline style: style='background:#0d0d0d'. For text color use text-white, text-muted or custom color styles on the footer element.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →