Bootstrap 5 cookie consent patterns. This page covers 4 implementations — bottom bar, floating card, granular controls and modal dialog.
localStorage Pattern
// Save consent
function acceptCookies() {
localStorage.setItem('consent', JSON.stringify({
analytics: true, marketing: true, ts: Date.now()
}))
hideBanner()
}
// Check on load
const consent = localStorage.getItem('consent')
if (!consent) showBanner()
1. Bootstrap 5 Cookie Bottom Bar
Fixed bottom cookie consent bar with accept and reject buttons.
2. Bootstrap 5 Floating Cookie Card
Floating cookie consent card in the bottom corner — less intrusive than a full-width bar.
3. Bootstrap 5 Granular Cookie Consent
Cookie consent with individual toggle controls for each category — essential, analytics and marketing.
4. Bootstrap 5 Cookie Consent Modal
Cookie consent as a Bootstrap modal dialog — blocks interaction until accepted.
Frequently Asked Questions
Use a fixed bottom div (position:fixed; bottom:0; left:0; right:0; z-index:1050) with accept/reject buttons. Store the user's choice in localStorage: localStorage.setItem('cookieConsent', 'accepted'). On page load check this value and skip showing the banner if already set.
On accept: localStorage.setItem('cookieConsent', JSON.stringify({ essential:true, analytics:true, marketing:true, timestamp: Date.now() })). On page load: const consent = JSON.parse(localStorage.getItem('cookieConsent')); if(consent) hideBanner().
A banner (fixed bottom bar) is less disruptive — users can still see the page. A modal blocks interaction and is more forceful. GDPR doesn't require blocking the page — a banner is generally better UX. Use a modal only if your legal team specifically requires it.
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 →Use code FIRST30 for 30% off your first purchase.