Bootstrap Cookie Notice

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

Open Live Demo

---

Licence

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

Licence Summary