Bootstrap 6 Dialogs & Drawers — 10 Free Templates
Bootstrap 6 rebuilt this area completely: Modal became Dialog, Offcanvas became Drawer, and both are now native <dialog> elements rather than divs with a faked backdrop. This pack covers all ten shapes you actually need — sizes, scrolling, forms, destructive confirms, non-modal panels, drawers on four sides, bottom sheets, toasts and entry animations.
Being a real <dialog> means the browser gives you the top layer (no z-index fights with sticky headers), focus trapping, focus restored to the trigger on close, Escape to dismiss and inert page content — all of which was hand-rolled JavaScript in v5. It also means the markup must be a <dialog>: a <div class="dialog"> styles perfectly, looks finished, and never opens, with nothing logged. That single mistake accounts for most failed v5 ports, and the pack calls it out on the pages where it bites.
Key features
- Ten standalone dialog pages plus an index gallery
- Built on native <dialog> — top layer, focus trapping and Escape come from the browser
- Non-modal dialogs that leave the page interactive — no v5 equivalent at all
- Drawers on all four edges, replacing Offcanvas with the same element and JS
- Mobile bottom sheet via .drawer-sheet with .drawer-fit-content
- Static destructive confirms that resist backdrop dismissal
- Form dialogs submitting from the footer using the form attribute
- Four dialog sizes plus fullscreen takeover
- Stacked toasts including the translucent variant
- Slide-up, slide-down and instant entry animations, reduced-motion aware
- Porting notes covering the div-instead-of-dialog trap that silently breaks v5 ports
- Bootstrap 6 vendored at a pinned commit, ESM-only, no build step
Before you use it
Bootstrap 6 is in alpha: 6.0.0-alpha.1 shipped on 8 October 2026, and more breaking changes are expected before the stable release. This template bundles the exact Bootstrap build it was tested against, so nothing changes until you choose to upgrade. Bootstrap 6 supports Chrome and Edge 130+, Firefox 132+ and Safari 18+.
