How to Create a Simple Cookie Banner Consent Using Bootstrap 4

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.

Read More – A jQuery Plugin to Add a Cookie Consent Banner on a Website | Cookit

How to make use of it:

1. Load the Cookie Banner plugin’s JavaScript and CSS into your Bootstrap website.

<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 a 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>

Read More – A Modal Dialog Bootstrap Cookie Banner Consent Settings and Framework

3. 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;
}

See Also –

Cookie Consent Module for Angular | ngx-cookieconsent
Automatic GDPR Cookies Banner for Google Analytics & Facebook Pixel | GlowCookies
Create a Cookie Notice with Vanilla JavaScript | CookieNoticeJS

 


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.

Related Posts

Simple-and-Modern-Multi-Level-Sidebar-Menu-on-Bootstrap-4

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…

bootstrap-5-dark-theme

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

Leave a Reply

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