Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 Footer for React — Glassmorphism

A production-ready glassmorphism footer: a multi-column site footer with a brand description, three link groups, a newsletter sign-up field and a copyright row. Pick your brand color, toggle dark mode and corner radius — the live preview and the React code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';

export default function Footer() {
  return (
    <footer className="mt-5 glass">
      <div className="mw-6xl mx-auto px-4 py-5 row row-cols-1 row-cols-md-4 g-5">
        <div className="col">
          <p className="fs-5 fw-bold text-body-emphasis">◆ Acme</p>
          <p className="mt-2 small text-body-secondary">Tools for teams that ship.</p>
        </div>
        <div className="col">
          <h3 className="small fw-semibold text-uppercase text-body-emphasis">Product</h3>
          <ul className="list-unstyled mt-2 d-flex flex-column gap-2">
            <li><a href="#" className="small text-decoration-none text-body-secondary">Features</a></li>
            <li><a href="#" className="small text-decoration-none text-body-secondary">Pricing</a></li>
            <li><a href="#" className="small text-decoration-none text-body-secondary">Changelog</a></li>
          </ul>
        </div>
        <div className="col">
          <h3 className="small fw-semibold text-uppercase text-body-emphasis">Company</h3>
          <ul className="list-unstyled mt-2 d-flex flex-column gap-2">
            <li><a href="#" className="small text-decoration-none text-body-secondary">About</a></li>
            <li><a href="#" className="small text-decoration-none text-body-secondary">Careers</a></li>
            <li><a href="#" className="small text-decoration-none text-body-secondary">Blog</a></li>
          </ul>
        </div>
        <div className="col">
          <h3 className="small fw-semibold text-uppercase text-body-emphasis">Resources</h3>
          <ul className="list-unstyled mt-2 d-flex flex-column gap-2">
            <li><a href="#" className="small text-decoration-none text-body-secondary">Docs</a></li>
            <li><a href="#" className="small text-decoration-none text-body-secondary">Guides</a></li>
            <li><a href="#" className="small text-decoration-none text-body-secondary">Support</a></li>
          </ul>
        </div>
      </div>
      <div className="border-top">
        <div className="mw-6xl mx-auto px-4 py-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
          <p className="small text-body-secondary">© 2026 Acme Inc. All rights reserved.</p>
          <form className="d-flex align-items-center gap-2">
            <label htmlFor="ft-email" className="small text-body-secondary">Newsletter</label>
            <input id="ft-email" type="email" placeholder="you@company.com" className="form-control rounded-2" />
            <button type="submit" className="btn btn-brand fw-semibold rounded-2">Subscribe</button>
          </form>
        </div>
      </div>
    </footer>
  );
}

More Bootstrap components for React

All components →

Free Bootstrap 5 Footer for React — Glassmorphism by pGento

Install Bootstrap 5 for React

Create a React project with Vite and install Bootstrap:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install bootstrap

Save the generated theme.css next to the component; the component file already imports bootstrap/dist/css/bootstrap.min.css and ./theme.css. No Bootstrap JavaScript is required — interactivity uses useState.

Use the footer in React

// App.jsx
import Footer from './Footer';

export default function App() {
  return <Footer />;
}

Accessibility & customization

Wrapped in a <footer> landmark; link groups use headings + lists, and the newsletter input has a visually associated label for assistive technology.

Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryReact 18+ (function component)
Interactive stateNone (static markup)
Dark modeYes — toggle in the editor
StyleGlassmorphism (backdrop blur)

Frequently asked questions

How do I install this Bootstrap footer in React?
Create a React project, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the footer?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the footer support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the footer accessible?
Wrapped in a <footer> landmark; link groups use headings + lists, and the newsletter input has a visually associated label for assistive technology.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Bootstrap 5 Footer for React — Glassmorphism

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.