Cookie Consent

Bootstrap 5 Cookie Consent banner

Bootstrap cookie banner is a popup window with cookie notice required by GDPR. Learn how to create a modal like this with Bootstrap 5 or download free examples.

Basic example

Click the button to launch the cookie consent.

Edit in sandbox 
        
            
                <!-- Button trigger modal -->
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#cookieconsent1">
                    Launch cookie consent
                </button>

                <!-- Modal -->
                <div class="modal fade" id="cookieconsent1" tabindex="-1" aria-labelledby="cookieconsentLabel1" aria-hidden="true" data-mdb-backdrop="static" data-mdb-keyboard="false">
                    <div class="modal-dialog modal-sm d-flex justify-content-center">
                        <div class="modal-content text-center">
                            <div class="modal-header d-flex justify-content-center">
                                <h5 class="modal-title text-primary" id="cookieconsentLabel1">Cookies & Privacy</h5>
                            </div>
                            <div class="modal-body p-4">
                                This website uses cookies to ensure you get the best experience on our website.
                            </div>
                            <div class="modal-footer d-flex justify-content-center">
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" href="#">Learn more</button>
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-dismiss="modal">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->

With icon

You can add an icon for cookie consent. Remove the .modal-sm that is next to the .modal-dialog to extend the modal and make space for the icon.

Edit in sandbox 
        
            
                <!-- Button trigger modal -->
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary mb-2" data-mdb-modal-init data-mdb-target="#cookieconsent2">
                    Launch cookie consent
                </button>

                <!-- Modal -->
                <div class="modal fade" id="cookieconsent2" tabindex="-1" aria-labelledby="cookieconsentLabel2" aria-hidden="true" data-mdb-backdrop="static" data-mdb-keyboard="false">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title" id="cookieconsentLabel2">Cookies & Privacy</h5>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-3 d-flex align-items-center justify-content-center">
                                        <i class="fas fa-cookie-bite fa-4x text-primary"></i>
                                    </div>

                                    <div class="col-9">
                                        <p>This website uses cookies to ensure you get the best experience on our website.<a class="d-block" href="#">Read more about cookies</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" data-mdb-dismiss="modal">Reject</button>
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-dismiss="modal">
                                    Accept
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->

With checkboxes

Add checkboxes if you want the user to be able to select which cookie consent is consented to.

Edit in sandbox 
        
            
                <!-- Button trigger modal -->
            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#cookieconsent3">
                Launch cookie consent
            </button>

            <!-- Modal -->
            <div class="modal top fade" id="cookieconsent3" tabindex="-1" aria-labelledby="cookieconsentLabel3" aria-hidden="true" data-mdb-backdrop="static" data-mdb-keyboard="false">
                <div class="modal-dialog">
                    <div class="modal-content d-block text-start">
                        <div class="modal-header d-block ">
                            <h5 class="modal-title" id="cookieconsentLabel3">Cookies & Privacy</h5>
                            <p>
                                This website uses cookies to ensure you get the best experience on our website.
                            </p>
                            <p>
                                <a href="#">Read more about cookies</a>
                            </p>
                        </div>
                        <div class="modal-body">
                            <!-- Necessary checkbox -->
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="necessary" checked />
                                <label class="form-check-label" for="necessary">
                                    <p>
                                        <strong>Necessary cookies</strong>
                                        <muted>help with the basic functionality of our website, e.g remember if you gave consent to cookies.</muted>
                                    </p>
                                </label>
                            </div>
                            <!-- Analytical checkbox -->
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="analytical" />
                                <label class="form-check-label" for="analytical">
                                    <p>
                                        <strong>Analytical cookies</strong>
                                        <muted>make it possible to gather statistics about the use and trafiic on our website, so we can make it better.</muted>
                                    </p>
                                </label>
                            </div>
                            <!-- Marketing checkbox -->
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="marketing" />
                                <label class="form-check-label" for="marketing">
                                    <p>
                                        <strong>Marketing cookies</strong>
                                        <muted>make it possible to show you more relevant social media content and advertisements on our website and other platforms.</muted>
                                    </p>
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" data-mdb-dismiss="modal">
                                Accept necessary
                            </button>
                            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-dismiss="modal">
                                Accept all
                            </button>
                        </div>
                    </div>
                </div>
            </div>

Frame

To make the modal "frame-like" add .modal-frame class to the .modal-dialog element. You also need to specify the direction by adding .modal-bottom or .modal-top to the ..modal-dialog.

Edit in sandbox 
        
            
            <!-- Button trigger modal -->
<button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#cookieconsent4">
  Launch frame modal
</button>

<!-- Modal frame bottom example -->
<div class="modal fade bottom" id="cookieconsent4" tabindex="-1" aria-labelledby="cookieconsent4" aria-hidden="true">
  <div class="modal-dialog modal-frame modal-bottom">
    <div class="modal-content rounded-0">
      <div class="modal-body py-1">
        <div class="d-flex justify-content-center align-items-center my-3">
          <p class="mb-0">We use cookies to improve your website experience</p>
          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-sm ms-2" data-mdb-dismiss="modal">Ok, thanks</button>
          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary btn-sm ms-2">Learn more</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal frame bottom example-->