Bootstrap 5 Cookie Banner
A Cookie Banner is a fixed notification UI component that informs visitors about cookie usage and requests consent before tracking or analytics scripts are activated. In Bootstrap 5, it is typically built using the fixed-bottom positioning utility, card or alert classes, and flex utilities to align text and action buttons side by side. Use it on any site that processes EU/UK visitor data under GDPR, ePrivacy Directive, or similar legislation requiring informed prior consent.
Primary Class
.cookie-bannerCommon Use Cases
- →An e-commerce store using Google Analytics and Meta Pixel must display a cookie banner before firing any tracking events, allowing users to accept or decline non-essential cookies on first visit.
- →A SaaS product marketing site that runs A/B testing via Optimizely needs a consent banner that gates the activation of experiment scripts until the visitor explicitly accepts analytics cookies.
- →A healthcare information portal subject to HIPAA and GDPR must present granular cookie categories — strictly necessary, functional, and analytics — so users can accept each independently before any session data is collected.
- →A news publisher monetising through programmatic advertising must obtain TCF (Transparency and Consent Framework) consent before passing user identifiers to ad partners, using the banner as the primary consent collection point.
Variants & Classes
| Variant | Description |
|---|---|
| Cookie Banner Default | Standard cookie banner with Bootstrap's default styling. |
| Cookie Banner Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div id="cookieBanner" class="fixed-bottom bg-dark text-white py-3 shadow-lg" style="z-index: 1055;">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-lg-8">
<p class="mb-0 small">
We use cookies to improve your experience, analyse site traffic, and personalise content.
By clicking <strong>Accept All</strong>, you consent to our use of cookies.
<a href="/privacy-policy" class="text-warning text-decoration-underline">Learn more</a>
</p>
</div>
<div class="col-lg-4 d-flex gap-2 justify-content-lg-end flex-wrap">
<button type="button" class="btn btn-outline-light btn-sm" onclick="handleCookieChoice('necessary')">
Necessary Only
</button>
<button type="button" class="btn btn-warning btn-sm text-dark fw-semibold" onclick="handleCookieChoice('all')">
Accept All
</button>
</div>
</div>
</div>
</div>
<script>
function handleCookieChoice(choice) {
localStorage.setItem('cookieConsent', choice);
document.getElementById('cookieBanner').style.display = 'none';
}
// Hide banner if consent already recorded
if (localStorage.getItem('cookieConsent')) {
document.getElementById('cookieBanner').style.display = 'none';
}
</script>Live Examples
Basic Cookie Banner
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated cookie banner with custom colours
- ✓Cookie Banner with interactive states
- ✓Responsive cookie banner for all screen sizes
Best Practices
Store consent in localStorage, not a session cookie
Using localStorage.setItem('cookieConsent', 'all') persists the user's choice across browser sessions so they are not re-prompted on every visit — storing it in a session cookie means it is lost when the tab closes, creating a frustrating repeat experience.
Use fixed-bottom with a high z-index to avoid overlap issues
Bootstrap modals and dropdowns use z-index values up to 1050, so setting your cookie banner to z-index: 1055 via inline style or a custom utility class ensures it always renders above other page elements without fighting specificity wars.
Gate analytics scripts behind the consent check
Do not load Google Analytics or Meta Pixel in the <head> unconditionally — instead wrap the script injection in a function that checks localStorage.getItem('cookieConsent') === 'all' before dynamically appending the script tag to the DOM.
Provide a 'Manage Preferences' link post-consent
GDPR requires that users can withdraw consent as easily as they gave it — add a small 'Cookie Settings' link in your site footer that re-shows the banner or opens a modal with granular category toggles, using Bootstrap's data-bs-toggle='modal' trigger.