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 has not been released. npm i bootstrap@6 does not work yet and the framework is still changing, so treat this as a head start on learning v6 rather than a foundation for a production site you need to maintain today. The framework is vendored into the template at a pinned commit, so nothing here can drift. It targets evergreen browsers only — Safari 16.4+, Chrome 111+ and Firefox 113+ — because Bootstrap 6 is built on oklch() and color-mix().
