April 20, 2022

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

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

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.


You may also like...

Leave a Reply

Your email address will not be published.