<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="cookie-bar" style="display: block;"> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-12">Our website uses cookies to provide a better service. <strong><a href="/Public/Cookies">Read more</a></strong></div> <div class="col-md-4 col-sm-12"><button class="cookie-bar-button">Got it</button></div> </div> </div> </div> <div class="container"> <div class="row"> <br><br> </div> </div>

.cookie-bar { background: #eee; width: 100%; top: 0; z-index: 10000; padding-bottom: 10px; padding-top: 10px; display: none; } .cookie-bar .cookie-bar-button { color: #fff; background-color: #323334; border: 0; padding: 5px 10px 5px 10px; } .cookie-bar .col-md-8 { margin-top: 5px; vertical-align: middle; text-align: right; } .cookie-bar .col-md-4 { vertical-align: middle; text-align: left; } /* Responsive */ @media (max-width: 991px){ .cookie-bar .col-md-8 { margin-bottom: 10px; text-align: center; } .cookie-bar .col-md-4 { vertical-align: middle; text-align: center; } }

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eee" }, "button": { "background": "#000" } }, "position": "top" })}); </script>