Modals capture attention for confirmations, forms, or detail views. Markup lives at the end of <body>: modal → modal-dialog → modal-content with header, body, and footer sections. Open via data-bs-toggle="modal" and data-bs-target="#id".
Toasts for lightweight feedback
Toasts are non-blocking notifications. Place them in a toast-container (often top-end fixed). Trigger with JavaScript or Bootstrap’s toast API after form success—avoid stacking too many at once.
Focus management
Modals trap focus and add a backdrop. Always provide a close control and a clear primary action. For destructive flows, use btn-danger on confirm and keep cancel as the safe default focus where possible.
Self-check
- Which element wraps the visible dialog box?
- How do you open a modal from a button without writing JS?
- When is a toast better than a modal?