→ Arturo
→ Cookie Consent Banner Made with bootstra...

Cookie Consent Banner Made with bootstrap

Fade from the bottom with options and persistent storage

This bootstrap css example is contributed by Arturo, on 22-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Cookie consent

Author Arturo

3.6k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <h1>Website Content</h1>
    <p>Your website content goes here...</p>
    <button class="btn btn-primary" onclick="showCookieConsent()">Show Cookie Consent</button>
</div>

<div class="cookie-consent" id="cookieConsent">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h5>We value your privacy</h5>
                <p class="mb-3">
                    We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze
                    our traffic. By clicking "Accept All", you consent to our use of cookies.
                </p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <button class="btn btn-outline-light me-2 mb-2" onclick="toggleSettings()">Cookie Settings</button>
                <button class="btn btn-primary me-2 mb-2" onclick="acceptAll()">Accept All</button>
                <button class="btn btn-secondary mb-2" onclick="acceptNecessary()">Accept Necessary Only</button>
            </div>
        </div>

<div class="cookie-settings mt-3" id="cookieSettings">
            <div class="row">
                <div class="col-md-12">
                    <h6 class="mb-3">Manage Cookie Preferences</h6>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="necessaryCookies" checked disabled>
                        <label class="form-check-label" for="necessaryCookies">
                            <strong>Necessary Cookies</strong>
                            <div class="text-muted small">These cookies are essential for the website to function properly.</div>
                        </label>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="analyticsCookies">
                        <label class="form-check-label" for="analyticsCookies">
                            <strong>Analytics Cookies</strong>
                            <div class="text-muted small">Help us understand how visitors interact with our website.</div>
                        </label>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="marketingCookies">
                        <label class="form-check-label" for="marketingCookies">
                            <strong>Marketing Cookies</strong>
                            <div class="text-muted small">Used to deliver personalized advertisements.</div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Dashboard Statistics Cards

Author:
Aisha Bello

1 year ago

4.5k

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

1 year ago

2.6k

v.4.6
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

1 year ago

1.3k

v.5.3
Timer with bootstrap

Author:
Anonymous

1 year ago

3.6k

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

1 year ago

2.1k

v.5.3
Custom buttons

Author:
Anonymous

1 year ago

1.8k

v.5.3
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

1.7k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

1 year ago

5.6k

v.3.4
Sign in with Google

Author:
Juan Martinez

1 year ago

4.5k

v.5.3
Minimal pricing cards

Author:
Sofia Petrova

1 year ago

1.4k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

1 year ago

3.9k

v.5.3
Collapsible Sidebar

Author:
Anonymous

9 months ago

4.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent