Bootstrap Cookie Notice

This simple JavaScript, HTML, Bootstrap, and CSS project adds a notice to the bottom of your website asking your users to accept cookies.

Tested and functional with Bootstrap 4, 4.5, and 5.


Install

This entire project is on GitHub - jacobsammon/BootstrapCookieNotice.

  1. Add the code to the bottom of your page, just before your </body> tags, if your page loads Bootstrap Javascript and JQuery, add it before that
  2. Insert the CSS stylesheet either by adding it to an existing stylesheet, putting it between <style> </style> tags, or making it its own stylesheet

The Code

Main Code
Unminifed version
<!-- Bootstrap Cookie Notice -->
<!--
* Created by Jacob Sammon | https://jacobsammon.com
* https://jacobsammon.com/bs-cookienotice/
-->
<div class="fixed-bottom text-light py-2 bg-dark <?php if($_COOKIE['CookieLover'] === "Absolutely"){ echo 'd-none'; }?>">
    <div class="container">
        <div class="row">
            <div class="col">
                <p class="lead mb-1 mt-1">This website uses cookies. >a class="text-white" target="_blank" href="http://allaboutcookies.org">Learn more</a>.</p>
            </div>
            <div class="col">
                <div style="text-align:right">
                    <button class="btn btn-success" onclick="document.cookie = 'CookieLover=Absolutely; expires=Thu, 01 April 2049 12:00:00 UTC; path=/';window.location.reload(true)">Accept</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- // Bootstrap Cookie Notice -->
Minified version
<!-- Bootstrap Cookie Notice --> <!-- * Created by Jacob Sammon | https://jacobsammon.com * https://jacobsammon.com/bs-cookienotice/ --> <div class="fixed-bottom text-light py-2 bg-dark <?php if($_COOKIE['CookieLover'] === "Absolutely"){ echo 'd-none'; }?>"> <div class="container"> <div class="row"> <div class="col"> <p class="lead mb-1 mt-1">This website uses cookies. >a class="text-white" target="_blank" href="http://allaboutcookies.org">Learn more</a>.</p> </div> <div class="col"> <div style="text-align:right"> <button class="btn btn-success" onclick="document.cookie = 'CookieLover=Absolutely; expires=Thu, 01 April 2049 12:00:00 UTC; path=/';window.location.reload(true)">Accept</button> </div> </div> </div> </div> </div> <!-- // Bootstrap Cookie Notice -->
CSS Code
Unminified version
.accept-btn-cookie{
    text-align:right;
}
@media only screen and (max-width: 500px){
    .accept-btn-cookie{
        text-align:left;
    }
}
Minified version
.accept-btn-cookie{text-align:right}@media only screen and (max-width:500px){.accept-btn-cookie{text-align:left}}

Demo


Licence

This code is licenced under the GNU General Public License v3.0. Please read the licence on GitHub.

Licence Summary

Permissions

  • Commercial use
  • Distribution
  • Modification
  • Patent use
  • Private use

Limitations

  • Warrenty
  • Liability

Conditions

  • Disclose source
  • License and copyright notice
  • Same license
  • State changes