Skip to content

Commit 45c9caf

Browse files
kolappannathankolappannathan
committed
updating to bootstrap-5
1 parent c7aa232 commit 45c9caf

File tree

3 files changed

+107
-83
lines changed

3 files changed

+107
-83
lines changed

‎README.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
# Bootstrap cookie banner
22

3-
A cookie banner for websites using Bootstrap 4.
3+
A cookie banner for websites using Bootstrap 5.
44

55
**Demo:** [![Live demo](https://img.shields.io/badge/view-Live%20Demo-blue.svg?style=flat-square&logo=microsoft%20edge)](https://kolappannathan.github.io/bootstrap-cookie-banner/)
66

7+
**Bootstrap Version used:** 5.0.1
8+
79
## Usage
810

9-
1. Include the css and js files.
11+
1. Include the CSS and js files.
1012

1113
```html
1214
<!-- Cookie Banner -->
@@ -20,14 +22,13 @@ A cookie banner for websites using Bootstrap 4.
2022
<div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert">
2123
&#x1F36A; This website uses cookies to ensure you get the best experience on our website.
2224
<a href="https://www.cookiesandyou.com/" target="blank">Learn more</a>
23-
<button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()">
25+
<button type="button" class="btn btn-primary btn-sm ms-3" onclick="window.nk_hideCookieBanner()">
2426
I Got It
2527
</button>
2628
</div>
2729
<!-- End of Cookie Banner -->
2830
```
2931

30-
## Used in
32+
## Screenshot
3133

32-
1. [kolappan.dev](https://kolappan.dev/)
33-
![Demo image](./demo/demo.jpg)
34+
![Demo image](./demo/demo.jpg)

‎changelog.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

7-
## [Unreleased]
7+
## [2.0.0] - 2021-06-04
8+
- Updated bootstrap to v5.0.1
89

910
## [1.0.0] - 2020-07-28
1011
### Added

‎index.html‎

Lines changed: 98 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,10 @@
77
<title>Bootstrap Cookie Banner</title>
88

99
<!-- Bootstrap CSS -->
10-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
11-
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
12-
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
13-
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
14-
crossorigin="anonymous"></script>
15-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
16-
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
17-
crossorigin="anonymous"></script>
18-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
19-
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
12+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
13+
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
2014
crossorigin="anonymous"></script>
2115

2216
<!-- Cookie Banner -->
@@ -25,81 +19,109 @@
2519
</head>
2620

2721
<body>
28-
<main class="container">
29-
<h2>Bootstrap Cookie Banner</h2>
30-
<br>
22+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
23+
<div class="container-fluid">
24+
<span class="navbar-brand">
25+
Bootstrap Cookie Banner
26+
<span class="badge rounded-pill bg-primary">Demo</span></h1>
27+
</span>
28+
</div>
29+
</nav>
30+
<main class="container mt-3">
3131
<p>
32-
Demo website for <a href="https://github.com/kolappannathan/bootstrap-cookie-banner">Bootstrap Cookie Banner</a>
33-
<br>
34-
If you don't see the cookie banner below, clear the localstorage.
32+
Demo website for Bootstrap Cookie Banner. If you don't see the cookie banner below, clear the localstorage.
3533
</p>
34+
<ul>
35+
<li>
36+
<a href="https://github.com/kolappannathan/bootstrap-cookie-banner" target="_blank">GitHub</a>
37+
</li>
38+
<li>
39+
Bootstrap Version used: 5.0.1
40+
</li>
41+
</ul>
3642

37-
<h5>HTML Code</h5>
38-
<code>
39-
&lt;!-- Cookie Banner --&gt;<br>
40-
&lt;div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert"&gt;<br>
41-
&#x1F36A; This website uses cookies to ensure you get the best experience on our website.<br>
42-
&lt;a href="https://www.cookiesandyou.com/" target="blank">Learn more&lt;/a&gt;<br>
43-
&lt;button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieAlert()"&gt;<br>
44-
I Got It<br>
45-
&lt;/button&gt;<br>
46-
&lt;/div&gt;<br>
47-
&lt;!-- End of Cookie Banner --&gt;<br>
48-
</code>
49-
<br>
50-
<h5>CSS Code</h5>
51-
<code>
52-
.nk-cookie-banner {
53-
position: fixed;
54-
bottom: 0px;
55-
left: 0px;
56-
width: 100%;
57-
z-index: 999;
58-
border-radius: 0px;
59-
display: none;
60-
}
61-
</code>
62-
<br><br>
63-
<h5>JS Code</h5>
64-
<code>
65-
/* Javascript to show and hide cookie banner using localstroage */
66-
<br>/* Shows the Cookie banner */
67-
<br>function showCookieBanner(){
68-
<br> let cookieBanner = document.getElementsByClassName("nk-cookie-banner")[0];
69-
<br> cookieBanner.style.display = "block";
70-
<br>}
71-
<br>/* Hides the Cookie banner and saves the value to localstorage */
72-
<br>function hideCookieBanner(){
73-
<br>localStorage.setItem("web_dev_isCookieAccepted", "yes");
74-
<br>let cookieBanner = document.getElementsByClassName("nk-cookie-banner")[0];
75-
<br>cookieBanner.style.display = "none";
76-
<br>}
77-
<br>/* Checks the localstorage and shows Cookie banner based on it. */
78-
<br>function initializeCookieBanner(){
79-
<br>let isCookieAccepted = localStorage.getItem("web_dev_isCookieAccepted");
80-
<br>if(isCookieAccepted === null)
81-
<br>{
82-
<br>localStorage.clear();
83-
<br>localStorage.setItem("web_dev_isCookieAccepted", "no");
84-
<br>showCookieBanner();
85-
<br>}
86-
<br>if(isCookieAccepted === "no"){
87-
<br>showCookieBanner();
88-
<br>}
89-
<br>}
90-
<br>// Assigning values to window object
91-
<br>window.onload = initializeCookieBanner();
92-
<br>window.nk_hideCookieBanner = hideCookieBanner;
93-
</code>
94-
95-
<br><br><br><br>
43+
<h5>Code </h5>
44+
<ul class="nav nav-tabs" id="myTab" role="tablist">
45+
<li class="nav-item" role="presentation">
46+
<button class="nav-link active" id="HTML-tab" data-bs-toggle="tab" data-bs-target="#HTML" type="button"
47+
role="tab" aria-controls="HTML" aria-selected="true">HTML</button>
48+
</li>
49+
<li class="nav-item" role="presentation">
50+
<button class="nav-link" id="css-tab" data-bs-toggle="tab" data-bs-target="#css" type="button" role="tab"
51+
aria-controls="css" aria-selected="false">CSS</button>
52+
</li>
53+
<li class="nav-item" role="presentation">
54+
<button class="nav-link" id="js-tab" data-bs-toggle="tab" data-bs-target="#js" type="button" role="tab"
55+
aria-controls="js" aria-selected="false">Javascript</button>
56+
</li>
57+
</ul>
58+
<div class="tab-content" id="myTabContent">
59+
<div class="tab-pane fade show active" id="HTML" role="tabpanel" aria-labelledby="HTML-tab">
60+
<code>
61+
&lt;!-- Cookie Banner --&gt;<br>
62+
&lt;div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert"&gt;<br>
63+
&#x1F36A; This website uses cookies to ensure you get the best experience on our website.<br>
64+
&lt;a href="https://www.cookiesandyou.com/" target="blank">Learn more&lt;/a&gt;<br>
65+
&lt;button type="button" class="btn btn-primary btn-sm ms-3" onclick="window.nk_hideCookieAlert()"&gt;<br>
66+
I Got It<br>
67+
&lt;/button&gt;<br>
68+
&lt;/div&gt;<br>
69+
&lt;!-- End of Cookie Banner --&gt;<br>
70+
</code>
71+
</div>
72+
<div class="tab-pane fade" id="css" role="tabpanel" aria-labelledby="css-tab">
73+
<code>
74+
.nk-cookie-banner {
75+
position: fixed;
76+
bottom: 0px;
77+
left: 0px;
78+
width: 100%;
79+
z-index: 999;
80+
border-radius: 0px;
81+
display: none;
82+
}
83+
</code>
84+
</div>
85+
<div class="tab-pane fade" id="js" role="tabpanel" aria-labelledby="js-tab">
86+
<code>
87+
/* Javascript to show and hide cookie banner using localstroage */
88+
<br>/* Shows the Cookie banner */
89+
<br>function showCookieBanner(){
90+
<br> let cookieBanner = document.getElementsByClassName("nk-cookie-banner")[0];
91+
<br> cookieBanner.style.display = "block";
92+
<br>}
93+
<br>/* Hides the Cookie banner and saves the value to localstorage */
94+
<br>function hideCookieBanner(){
95+
<br>localStorage.setItem("web_dev_isCookieAccepted", "yes");
96+
<br>let cookieBanner = document.getElementsByClassName("nk-cookie-banner")[0];
97+
<br>cookieBanner.style.display = "none";
98+
<br>}
99+
<br>/* Checks the localstorage and shows Cookie banner based on it. */
100+
<br>function initializeCookieBanner(){
101+
<br>let isCookieAccepted = localStorage.getItem("web_dev_isCookieAccepted");
102+
<br>if(isCookieAccepted === null)
103+
<br>{
104+
<br>localStorage.clear();
105+
<br>localStorage.setItem("web_dev_isCookieAccepted", "no");
106+
<br>showCookieBanner();
107+
<br>}
108+
<br>if(isCookieAccepted === "no"){
109+
<br>showCookieBanner();
110+
<br>}
111+
<br>}
112+
<br>// Assigning values to window object
113+
<br>window.onload = initializeCookieBanner();
114+
<br>window.nk_hideCookieBanner = hideCookieBanner;
115+
</code>
116+
</div>
117+
</div>
96118
</main>
97119

98120
<!-- Cookie Banner -->
99121
<div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert">
100122
&#x1F36A; This website uses cookies to ensure you get the best experience on our website.
101123
<a href="https://www.cookiesandyou.com/" target="blank">Learn more</a>
102-
<button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()">
124+
<button type="button" class="btn btn-primary btn-sm ms-3" onclick="window.nk_hideCookieBanner()">
103125
I Got It
104126
</button>
105127
</div>

0 commit comments

Comments
 (0)