→ 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

1.5k

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

Coming Soon Landing Page

Author:
Anonymous

3 weeks ago

152

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

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 month ago

309

v.5.3
Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

5 months ago

1.3k

v.5.3
Features section
Showcase features with icons

Author:
Prajwal Hallale

1 year ago

669

v.4.6
Pricing Cards

Author:
Anonymous

7 months ago

2.5k

v.5.3
bootstrap 5 search box with icon Example
Dark Theme Search Bar Light Theme Search Bar Simple Iconic Search Bar

Author:
Arturo

5 months ago

2.1k

v.5.3
Navbar
Basic Navbar with Dropdown

Author:
Evan Jent

3 weeks ago

299

v.4.6
Simple search bar

Author:
Reza Farhadi

9 months ago

2.7k

v.5.3
Call to Action Block

Author:
Kemaya m

1 year ago

535

v.4.6
Custom buttons

Author:
Anonymous

1 year ago

850

v.5.3
Dashboard Statistics Cards

Author:
Aisha Bello

5 months ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent