→ 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

4.2k

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

Clean Commerce Cart Design
A sleek shopping cart interface with quantity controls and real-time order summary

Author:
Mason Ashford

1 year ago

5.8k

v.5.3
Elon Musk 2
hero to last home

Author:
RAHAT RAHMAN OFICIAL

3 weeks ago

78

v.4.6
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

2 years ago

5.7k

v.5.3
Cart Hero Pro

Author:
Juan Antonio González Hernández

2 months ago

546

v.5.3
Bootstrap tabs
tab navigation

Author:
Anonymous

11 months ago

1.5k

v.5.3
Responsive Products Grid

Author:
Ross Wille

1 year ago

3.9k

v.5.3
Collapsible Sidebarteste

Author:
Bruno Dezan

1 year ago

4.4k

v.5.3
Scroll Animation
Scroll Animation

Author:
Rami AlAjo

1 year ago

3.5k

v.4.6
Simple hero section

Author:
Mateo Rojas

1 year ago

7.2k

v.5.3
Card w/ gradient background
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Prajwal Hallale

2 years ago

4.8k

v.5.3
Call to action section
basic full-width CTA

Author:
Mishti

2 years ago

6.2k

v.5.3
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Isaac Winslow

1 year ago

10.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent