Bootstrap Delete Confirmation Modal snippet — a free Bootstrap 5 modal snippet. Copy the HTML and paste straight into your Bootstrap 5 project.
1
2<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
4<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
5<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
6<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
7<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
8<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
9<style>
10body {
11 font-family: 'Varela Round', sans-serif;
12}
13.modal-confirm {
14 color: #636363;
15 width: 400px;
16}
17.modal-confirm .modal-content {
18 padding: 20px;
19 border-radius: 5px;
20 border: none;
21 text-align: center;
22 font-size: 14px;
23}
24.modal-confirm .modal-header {
25 border-bottom: none;
26 position: relative;
27}
28.modal-confirm h4 {
29 text-align: center;
30 font-size: 26px;
31 margin: 30px 0 -10px;
32}
33.modal-confirm .btn-close {
34 position: absolute;
35 top: -5px;
36 right: -2px;
37}
38.modal-confirm .modal-body {
39 color: #999;
40}
41.modal-confirm .modal-footer {
42 border: none;
43 text-align: center;
44 border-radius: 5px;
45 font-size: 13px;
46 padding: 10px 15px 25px;
47}
48.modal-confirm .modal-footer a {
49 color: #999;
50}
51.modal-confirm .icon-box {
52 width: 80px;
53 height: 80px;
54 margin: 0 auto;
55 border-radius: 50%;
56 z-index: 9;
57 text-align: center;
58 border: 3px solid #f15e5e;
59}
60.modal-confirm .icon-box i {
61 color: #f15e5e;
62 font-size: 46px;
63 display: inline-block;
64 margin-top: 13px;
65}
66.modal-confirm .btn, .modal-confirm .btn:active {
67 color: #fff;
68 border-radius: 4px;
69 background: #60c7c1;
70 text-decoration: none;
71 transition: all 0.4s;
72 line-height: normal;
73 min-width: 120px;
74 border: none;
75 min-height: 40px;
76 border-radius: 3px;
77 margin: 0 5px;
78}
79.modal-confirm .btn-secondary {
80 background: #c1c1c1;
81}
82.modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {
83 background: #a8a8a8;
84}
85.modal-confirm .btn-danger {
86 background: #f15e5e;
87}
88.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
89 background: #ee3535;
90}
91.trigger-btn {
92 display: inline-block;
93 margin: 100px auto;
94}
95</style>
96<div class="text-center">
97 <a href="#myModal" class="trigger-btn" data-bs-toggle="modal">Click to Open Confirm Modal</a>
98</div>
99
100<!-- Modal HTML -->
101<div id="myModal" class="modal fade">
102 <div class="modal-dialog modal-confirm">
103 <div class="modal-content">
104 <div class="modal-header flex-column">
105 <div class="icon-box">
106 <i class="material-icons"></i>
107 </div>
108 <h4 class="modal-title w-100">Are you sure?</h4>
109 <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">×</button>
110 </div>
111 <div class="modal-body">
112 <p>Do you really want to delete these records? This process cannot be undone.</p>
113 </div>
114 <div class="modal-footer justify-content-center">
115 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
116 <button type="button" class="btn btn-danger">Delete</button>
117 </div>
118 </div>
119 </div>
120</div> 
Bootstrap Simple Success Confirmation Popup snippet
Free Bootstrap 5 modal snippet — Bootstrap Simple Success Confirmation Popup snippet. Preview, copy HTML, drop it into any Bootstrap 5 project.
Bootstrap 5 customer ratings modal snippets with emojis
Add a modal to your UI with Bootstrap 5 customer ratings modal snippets with emojis. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap 5 success modal snippets
Bootstrap 5 success modal snippets — a free Bootstrap 5 modal snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.