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.
Bootstrap class
No dedicated Bootstrap class
Common 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 and classes
| Variant | Description and classes |
|---|---|
| Fixed bottom bar | Full-width bar pinned to the bottom of the viewport.fixed-bottom bg-dark text-white py-3 |
| Floating card | Compact card in a corner that leaves the page usable.position-fixed bottom-0 start-0 m-3 card shadow |
| Dismissible alert | Banner that closes with Bootstrap's alert plugin.alert alert-dismissible fade show + btn-close |
| Toast style | Consent message shown as a toast in a corner.toast-container position-fixed bottom-0 end-0 p-3 + toast |
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 template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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.