Modals
Bootstrap 5.3 dialog pattern with role="dialog" semantics, focus management, and theme variables. Backdrop blur, borders, surfaces, form controls, cards, and alerts all follow data-bs-theme so light and dark modes stay coherent.
Beyond the basics
Each live example uses the modal-showcase-bs5 class for Elementer styling. Tooltips and popovers inside a modal must use container: '#modalId' (handled in the page script) so positioning stays correct while the dialog is open.
Core behavior
Fade, centering, scroll, static backdrop
Standard .modal.fade with data-bs-dismiss="modal", optional modal-dialog-centered, modal-dialog-scrollable, and data-bs-backdrop="static".
Responsive width
Dialog sizes
Use modal-sm, default, modal-lg, and modal-xl for density and data-heavy layouts.
Viewport fill
Fullscreen breakpoints
modal-fullscreen-sm-down turns the dialog into an edge-to-edge sheet on small screens — ideal for mobile workflows.
Content patterns
Forms, grid, tabs, lists, and media
Compose real UI: sign-in fields, Bootstrap grid, tab panes, selectable list groups, onboarding cards, inline alerts, and tooltips or popovers.
Themed chrome
Headers, hero layout, destructive flow
Semantic emphasis with tinted headers, centered hero icon, dark chrome, and a destructive confirmation path with a danger primary action.
Dynamic title
Varying modal content
Listen for show.bs.modal and read event.relatedTarget to prefill the title and inputs from the trigger’s data-bs-whatever attribute.