Press "Enter" to skip to content

How to Create a Simple Cookie Consent Using Bootstrap 4 | Bootstrap Cookie Banner

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or likely to visit from the EU, you will need a cookie warning or popup notification.

how to add cookie banner to website html, cookie consent banner, simple cookie banner, bootstrap 5 cookie consent, free cookie consent code html, cookie banner javascript example

Simplistic GDPR Cookie Consent Banner in vanilla javascript | Cookify

How to make use of it:

1. Load the Cookie Banner plugin’s JavaScript and CSS records data into your Bootstrap web site.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css"> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script> 
<link rel="stylesheet" href="./src/cookie-banner.css"> <script async="" src="./src/cookie-banner.js"></script>

2. Add cookie consent message to the accept cookies banner.

<div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert">
  🍪 This website uses cookies to ensure you get the best experience on our website.
  <a href="/privacy/" target="blank" rel="noopener noreferrer">Learn more</a>
  <button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()">
    I Got It
  </button>
</div>

3. That’s it. Override the default kinds of the cookie consent banner.

.nk-cookie-banner {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 999;
  border-radius: 0px;
  display: none;
}

Show And Hide Cookie Consent Banner, How to Add Cookie Banner to Website, cookie banner script, cookie banner html css


See Demo And Download

Official Website(kolappannathan): Click Here

This superior jQuery/javascript plugin is developed by kolappannathan. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *