→ 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

2.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

Gradient Buttons

Author:
Prajwal Hallale

1 year ago

2.5k

v.5.3
404 page template

Author:
Valeria González

1 year ago

17.4k

v.5.3
Steps section

Author:
Ankit khedkar

11 months ago

5.4k

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

2 weeks ago

126

v.5.3
Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

8 months ago

1.9k

v.5.3
Image slider
Image slider with auto-scrolling and with title and description

Author:
Anonymous

11 months ago

4.1k

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

1 year ago

1.9k

v.5.3
Search section

Author:
Ankit khedkar

8 months ago

1.6k

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

1 year ago

2.2k

v.3.4
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

11 months ago

983

v.4.6
Login with google button bootstrap

Author:
Anonymous

7 months ago

1.9k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

1 year ago

8.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent