→ 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

existing client section
do noy copy

Author:
Fitar Ahmed

3 weeks ago

55

v.4.6
edu info
not copy

Author:
Fitar Ahmed

3 weeks ago

47

v.4.6
Beautiful Rating Component
Take user ratings with this form card

Author:
Mateo Rojas

1 year ago

2.3k

v.5.3
User profile card
Responsive author card

Author:
Anonymous

1 year ago

8k

v.5.3
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

1 year ago

7.1k

v.5.3
footer
tui copy korle guru chor

Author:
rimon majumder

3 weeks ago

64

v.4.6
Porthfolio

Author:
Tanvir fahad

4 weeks ago

68

v.4.6
Bootstrap 5 shopping cart design
clean and beautiful shopping cart component

Author:
Valeria González

1 year ago

4.6k

v.5.3
Sound Board
Sound Board

Author:
Rami AlAjo

1 year ago

1.6k

v.4.6
misson vission

Author:
Sahin Miah

3 weeks ago

55

v.4.6
Default progress bar designs by boostrap css

Author:
Omar Khaled

1 year ago

2.5k

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

1 year ago

8.2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent