- No data uploaded
- Instant results
Bootstrap 5 Footer for Vue 3 — 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 Vue 3 code update instantly in your browser.
Live component editor
Live preview
<script setup>
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme.css';
</script>
<template>
<footer class="mt-5 glass">
<div class="mw-6xl mx-auto px-4 py-5 row row-cols-1 row-cols-md-4 g-5">
<div class="col">
<p class="fs-5 fw-bold text-body-emphasis">◆ Acme</p>
<p class="mt-2 small text-body-secondary">Tools for teams that ship.</p>
</div>
<div class="col">
<h3 class="small fw-semibold text-uppercase text-body-emphasis">Product</h3>
<ul class="list-unstyled mt-2 d-flex flex-column gap-2">
<li><a href="#" class="small text-decoration-none text-body-secondary">Features</a></li>
<li><a href="#" class="small text-decoration-none text-body-secondary">Pricing</a></li>
<li><a href="#" class="small text-decoration-none text-body-secondary">Changelog</a></li>
</ul>
</div>
<div class="col">
<h3 class="small fw-semibold text-uppercase text-body-emphasis">Company</h3>
<ul class="list-unstyled mt-2 d-flex flex-column gap-2">
<li><a href="#" class="small text-decoration-none text-body-secondary">About</a></li>
<li><a href="#" class="small text-decoration-none text-body-secondary">Careers</a></li>
<li><a href="#" class="small text-decoration-none text-body-secondary">Blog</a></li>
</ul>
</div>
<div class="col">
<h3 class="small fw-semibold text-uppercase text-body-emphasis">Resources</h3>
<ul class="list-unstyled mt-2 d-flex flex-column gap-2">
<li><a href="#" class="small text-decoration-none text-body-secondary">Docs</a></li>
<li><a href="#" class="small text-decoration-none text-body-secondary">Guides</a></li>
<li><a href="#" class="small text-decoration-none text-body-secondary">Support</a></li>
</ul>
</div>
</div>
<div class="border-top">
<div class="mw-6xl mx-auto px-4 py-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
<p class="small text-body-secondary">© 2026 Acme Inc. All rights reserved.</p>
<form class="d-flex align-items-center gap-2">
<label for="ft-email" class="small text-body-secondary">Newsletter</label>
<input id="ft-email" type="email" placeholder="you@company.com" class="form-control rounded-2">
<button type="submit" class="btn btn-brand fw-semibold rounded-2">Subscribe</button>
</form>
</div>
</div>
</footer>
</template>
/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
--bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
--bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
--bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }
.glass { background: rgba(255, 255, 255, .6) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .6) !important; }
[data-bs-theme="dark"] .glass, [data-bs-theme="dark"].glass { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .1) !important; }
.bg-glass-page { background: linear-gradient(135deg, #e0e7ff, #f0f9ff, #ffe4e6); }
[data-bs-theme="dark"] .bg-glass-page, [data-bs-theme="dark"].bg-glass-page { background: linear-gradient(135deg, #020617, #1e1b4b, #0f172a); }
More Bootstrap components for Vue 3
All components →- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
- Cookie Consent Banner A GDPR-style cookie banner with equally prominent “Accept all” and “Reject all”, granular analytics/marketing toggles (off by default), stored consent and Google Consent Mode v2 signals
- Contact Form A contact card with name, email, a topic selector, a message textarea and a submit button
- Hero Section A landing-page hero with an announcement badge, a large headline, supporting copy, primary and secondary calls to action and a row of social-proof stats
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Feature Grid A marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description
Install Bootstrap 5 for Vue 3
Create a Vue 3 project with Vite and install Bootstrap:
npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm install bootstrapSave 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 ref().
Use the footer in Vue 3
<!-- App.vue -->
<script setup>
import Footer from './Footer.vue';
</script>
<template>
<Footer />
</template>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
| Item | Details |
|---|---|
| CSS framework | Bootstrap 5.3+ (CSS only) |
| Library | Vue 3 (<script setup>) |
| Interactive state | None (static markup) |
| Dark mode | Yes — toggle in the editor |
| Style | Glassmorphism (backdrop blur) |
Frequently asked questions
How do I install this Bootstrap footer in Vue 3?
Create a Vue 3 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.