Cookie Banner

Liander Bootstrap custom component. Cookie Banner component

On this page

Example

The Cookie Banner is not really a component on it’s own, but is so commonly used, that this documentation shows how to build the Liander Cookie Banner.

Full Page Example

See a full page example on the Cookie Banner example page

Usage

The Cookie Banner uses Collapse to show/hide the banner. Custom Javascript needs to be added to the button clicks to remember the user’s choice.

Accept Cookies?

html

<div class="collapse show bg-dark text-white text-center py-2" id="cookieBannerExample">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-7 m-auto">
        <div class="row align-items-center">
          <div class="col">
            Accept Cookies?
          </div>
        </div>
      </div>
      <div class="col-12 col-md-5 m-auto">
        <button type="button" class="btn btn-sm btn-secondary me-2" data-bs-toggle="collapse" data-bs-target="#cookieBannerExample"
          aria-expanded="true" aria-controls="cookieBannerExample">
          Accept <span class="fa fa-angle-right ms-2"></span>
        </button>
        <button type="button" class="btn btn-sm btn-secondary" data-bs-toggle="collapse" data-bs-target="#cookieBannerExample"
          aria-expanded="true" aria-controls="cookieBannerExample">
          Decline <span class="fa fa-angle-right ms-2"></span>
        </button>
      </div>
    </div>
  </div>
</div>