Bootstrap 5Feedback

Bootstrap 5 Confirmation Dialog

A Confirmation Dialog is a modal overlay that asks the user to explicitly verify a destructive or irreversible action before it executes, such as deleting a record or cancelling a subscription. Built with Bootstrap 5's modal component, it combines a focused message, a clear Cancel option, and a visually distinct Confirm button. Use it whenever the consequence of proceeding cannot be easily undone and accidental clicks would cause real data loss or user frustration.

Primary Class

.confirmation-dialog

Common Use Cases

→Permanently deleting a customer account or database record from an admin dashboard, where the action cannot be reversed without a full restore
→Cancelling an active paid subscription mid-cycle, ensuring the user understands they will lose access immediately rather than at the billing period end
→Removing a team member from a shared workspace, which revokes their permissions and deletes their local data across all connected devices
→Discarding unsaved form edits when the user navigates away from a multi-step configuration wizard, preventing silent data loss

Variants & Classes

Variant	Description	Classes
Confirmation Dialog Default	Standard confirmation dialog with Bootstrap's default styling.	`confirmation-dialog`
Confirmation Dialog Responsive	Responsive variant that adapts to different screen sizes.	`confirmation-dialog confirmation-dialog-responsive`

Code Example

<!-- Trigger Button -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteAccountModal">
  Delete Account
</button>

<!-- Confirmation Modal -->
<div class="modal fade" id="deleteAccountModal" tabindex="-1" aria-labelledby="deleteAccountModalLabel" aria-modal="true" role="dialog">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header border-0 pb-0">
        <h5 class="modal-title fw-semibold" id="deleteAccountModalLabel">Delete your account?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
      </div>

      <div class="modal-body pt-2">
        <p class="text-muted mb-0">This will permanently remove all your data, projects, and billing history. <strong>This action cannot be undone.</strong></p>
      </div>

      <div class="modal-footer border-0 pt-1">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Yes, delete my account</button>
      </div>

    </div>
  </div>
</div>

<!-- JavaScript: wire up the confirmed action -->
<script>
  document.getElementById('confirmDeleteBtn').addEventListener('click', function () {
    // Execute the delete request here
    console.log('Account deletion confirmed');
    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteAccountModal'));
    modal.hide();
  });
</script>

Live Examples

Basic Confirmation Dialog

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated confirmation dialog with custom colours
✓Confirmation Dialog with interactive states
✓Responsive confirmation dialog for all screen sizes

Best Practices

Use modal-dialog-centered for visual clarity

Adding the class modal-dialog-centered vertically centers the dialog on all screen sizes, preventing it from appearing tucked against the top of the viewport on mobile where users may miss the message body.

Label the confirm button with the exact action, not just 'OK'

Replace generic labels like 'OK' or 'Yes' with specific text such as 'Delete project' or 'Cancel subscription' so users process what they are agreeing to even if they only skim the dialog.

Remove the backdrop dismiss for high-stakes confirmations

Set data-bs-backdrop="static" and data-bs-keyboard="false" on the modal element to prevent accidental dismissal by clicking outside or pressing Escape, forcing a deliberate choice between Cancel and Confirm.

Keep the destructive button on the right

Place Cancel on the left and the destructive action on the right inside modal-footer so the layout matches the cognitive expectation users bring from native OS dialogs, reducing hesitation and misclicks.

FAQ

How do I pass dynamic data, like a record name, into the confirmation dialog before it opens?

Listen for Bootstrap's show.bs.modal event on the modal element and read the relatedTarget property to get the trigger button. Store the record name in a data attribute on the button (for example data-record-name="Project Alpha") and update the modal body text inside that event listener before the dialog becomes visible. This avoids rendering one modal per record.

Can I change the confirmation button colour to match my brand instead of btn-danger?

Yes. Replace btn-danger with any Bootstrap contextual class such as btn-primary or btn-warning, or create a custom class and override the background-color, border-color, and hover state with your own CSS variables. If you are using Bootstrap's Sass source, you can also override $danger in your variables file so btn-danger itself inherits your brand red.

How does Canvas Builder generate a Confirmation Dialog for my project?

When you describe a confirmation flow in your Canvas Builder prompt (for example 'add a delete button that asks the user to confirm before proceeding'), the AI outputs a fully wired Bootstrap 5 modal with the trigger button, modal markup, and the JavaScript event listener in a single production-ready HTML block. It applies your brand colours to the confirm button and cancel button automatically, and the output is responsive out of the box with modal-dialog-centered included.