Bootstrap 5 Modal with a delete button

Loading…

Bootstrap 5 Modal with a delete button | GoSnippets

Source Code

1<div class="container d-flex justify-content-center"> <button type="button" class="btn btn-danger btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal">DELETE</button>
2</div>
3<!-- Modal -->
4<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
5    <div class="modal-dialog">
6        <div class="modal-content">
7            <div class="modal-header">
8                <div class="container d-flex ps-0"><img src="https://imgur.com/Kh1gwTq.png">
9                    <h5 class="modal-title ms-2" id="exampleModalLabel">Delete the link?</h5>
10                </div> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
11            </div>
12            <div class="modal-body">
13                <p class="text-muted">If you delete the link will be gone forever. Are you sure you want to proceed?</p>
14            </div>
15            <div class="modal-footer"> <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger">Delete</button> </div>
16        </div>
17    </div>
18</div>

Bootstrap 5 Modal with a delete button

Source Code

More Modals snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery