Bootstrap Cookie Alert pages

<!DOCTYPE html>
<html>
<head>
    <title>Afficher la barre d'alerte de notification de cookie Bootstrap lors du chargement de la page - Plugin d'alerte de cookie JQuery | Par MEZGANI SAID</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Afficher la barre d'alerte de notification de cookie Bootstrap lors du chargement de la page - Plugin d'alerte de cookie JQuery">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
    <div class="container">
        <div class="card" style="margin-top: 70px">
            <div class="card-body">
                <div id="fillme"></div>
            </div>
        </div>
    </div>
    <!-- COOKIES -->
    <div class="alert alert-dismissible text-center cookiealert" role="alert">
        <div class="cookiealert-container">
            <b>En poursuivant votre navigation sur nos sites, vous acceptez l'installation et l'utilisation de cookies sur votre poste, 
                dans le respect de notre politique de protection de votre vie privée. <a href="http://bglesson.com/" target="_blank">Plus de details</a></b>
            <button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
                J'accepte
            </button>
        </div>
    </div>
    <!-- /COOKIES -->
<!-- JAVASCRIPT -->
<script>
    for (var i = 1; i <= 150; i++)
        document.querySelector("#fillme").innerHTML += "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor " 
        +"ut labore et dolore magna aliqua. ";
</script>
<!-- jQuery 3.2.1 + JS-Cookie 2.1.4 - Only needed if you are using the script version with dependencies -->
<!--<script src="https://cdn.jsdelivr.net/g/jquery@3.2.1,js-cookie@2.2.0"></script>-->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    border-radius: 0;
    background: #212327 url("cubes.png");
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
}

.cookiealert.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}
(function () {
    "use strict";

    var cookieAlert = document.querySelector(".cookiealert");
    var acceptCookies = document.querySelector(".acceptcookies");

    cookieAlert.offsetHeight; // Force browser to trigger reflow (https://stackoverflow.com/a/39451131)

    if (!getCookie("acceptCookies")) {
        cookieAlert.classList.add("show");
    }

    acceptCookies.addEventListener("click", function () {
        setCookie("acceptCookies", true, 60);
        cookieAlert.classList.remove("show");
    });
})();

// Cookie functions stolen from w3schools
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
toggle switch style02

toggle switch style02

page scroll progress bar

page scroll progress bar

input radio checkbox b4 style

input radio checkbox b4 style

Timeline style08

Timeline style08

Page 404 exemple 01

Page 404 exemple 01

Organization Chart

Organization Chart

Login Bootstrap3

Login Bootstrap3

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery