→ Alaric Sloane
→ Delete Confirmation Modal

Delete Confirmation Modal

This bootstrap css example is contributed by Alaric Sloane, on 02-Oct-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are popup,dialog

Tags: Modal

Author Alaric Sloane

10.5k

v.5.3

Fork Fullscreen

<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
    Delete Item
</button>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Are you sure you want to delete this item? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
            </div>
        </div>
    </div>
</div>

More Examples

Success modal

Author:
Alaric Sloane

8 months ago

2.4k

v.5.3
Login modal

Author:
Prajwal Hallale

1 year ago

5.6k

v.4.6
bootstrap 5 confirm modal

Author:
Anonymous

6 months ago

4.5k

v.5.3
Bootstrap Login Modal
Elegant Login Form

Author:
César Ferreira

5 months ago

3k

v.5.3
Bootstrap Login Modal
Elegant Login Form

Author:
Mateo Rojas

6 months ago

4.7k

v.5.3
Bootstrap 5 Login Modal

Author:
Anonymous

11 months ago

9.7k

v.5.3
Pricing Cards

Author:
Anonymous

7 months ago

2.8k

v.5.3
Get In Touch Form Example
Contact us form

Author:
Anonymous

8 months ago

1.2k

v.5.3
Responsive Bento Grid Layout
Bento grid layout using Bootstrap 5 and custom CSS

Author:
Anonymous

8 months ago

916

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

9 months ago

5.5k

v.4.6
Pricing cards

Author:
Prajwal Hallale

1 year ago

934

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

Author:
Jimmy Mercury

5 months ago

920

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent