Bootstrap Cookie Consent Offcanvas Panel — Free Snippet

<div class="container py-5 text-center">
  <p class="text-muted small">This preview auto-opens the cookie panel on load. Click "Reset" to trigger it again.</p>
  <button class="btn btn-sm btn-outline-dark" id="bscookieReset">Reset &amp; show again</button>
</div>

<div class="offcanvas offcanvas-bottom bscookie-panel" tabindex="-1" id="bscookiePanel" data-bs-backdrop="false">
  <div class="offcanvas-body d-flex flex-wrap align-items-center gap-3 justify-content-between">
    <p class="mb-0 small">We use cookies to improve your experience and analyze traffic. See our <a href="javascript:void(0)">Cookie Policy</a>.</p>
    <div class="d-flex gap-2 flex-shrink-0">
      <button class="btn btn-sm btn-outline-secondary" id="bscookieCustom">Customize</button>
      <button class="btn btn-sm btn-outline-dark" id="bscookieReject">Reject all</button>
      <button class="btn btn-sm btn-dark" id="bscookieAccept">Accept all</button>
    </div>
  </div>
  <div class="bscookie-prefs d-none" id="bscookiePrefs">
    <div class="offcanvas-body pt-0">
      <div class="form-check form-switch"><input class="form-check-input" type="checkbox" checked disabled><label class="form-check-label small">Essential (always on)</label></div>
      <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="bscookieAnalytics"><label class="form-check-label small">Analytics</label></div>
      <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="bscookieMarketing"><label class="form-check-label small">Marketing</label></div>
      <button class="btn btn-sm btn-dark mt-2" id="bscookieSave">Save preferences</button>
    </div>
  </div>
</div>

.bscookie-panel { max-height: none; }
.bscookie-prefs { border-top: 1px solid #eceef1; }

const panelEl = document.getElementById('bscookiePanel');
const panel = bootstrap.Offcanvas.getOrCreateInstance(panelEl, { backdrop: false });
const prefs = document.getElementById('bscookiePrefs');

function close(choice) {
  console.log('cookie choice:', choice);
  panel.hide();
}

document.getElementById('bscookieAccept').addEventListener('click', () => close('accept-all'));
document.getElementById('bscookieReject').addEventListener('click', () => close('reject-all'));
document.getElementById('bscookieCustom').addEventListener('click', () => prefs.classList.toggle('d-none'));
document.getElementById('bscookieSave').addEventListener('click', () => close('custom'));
document.getElementById('bscookieReset').addEventListener('click', () => { prefs.classList.add('d-none'); panel.show(); });

// A cookie banner should appear without requiring a click first — Bootstrap's
// offcanvas only opens on request, so this shows it once automatically.
panel.show();