What Bootstrap 6 brings, already built into Canvas
Every page, block and demo uses the new Bootstrap 6 components. Open any of them to see them working.
Native dialogs
Modals are now real <dialog> elements with built-in focus handling and an accessible backdrop. Canvas popups and lightbox forms use them.
Drawers
Offcanvas becomes Drawer. Side panels, mobile menus and filters slide in from any edge, with the same markup everywhere.
See drawers in Canvas →The Menu component
Dropdowns are now Menus, positioned with Floating UI and fully keyboard accessible, in navbars, buttons and filters.
See menus in Canvas →Accordions on details
Bootstrap accordions use native <details> and <summary>, so they open and close even before JavaScript loads.
New form fields
Checks, radios and switches move to the new .form-field markup with cleaner labels, states and validation.
Responsive prefix syntax
Write md:col-6 instead of col-md-6. The same breakpoint prefixes work across utilities, and xxl is now 2xl.
Bootstrap 5 vs Bootstrap 6 markup
The same layout in both versions. Canvas 8.1 ships every page already converted.
Bootstrap 5 · Canvas 8.0
<div class="row g-3">
<div class="col-md-6 mb-4">…</div>
</div>
<button class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#signup">
Sign up
</button>
<div class="modal fade" id="signup">…</div>Bootstrap 6 · Canvas 8.1
<div class="row g-5">
<div class="md:col-6 mb-7">…</div>
</div>
<button class="btn btn-solid theme-primary"
data-bs-toggle="dialog" data-bs-target="#signup">
Sign up
</button>
<dialog class="dialog" id="signup">…</dialog>Responsive prefixes, a renumbered spacing scale, theme-* colours and native elements. Your own pages convert the same way with the upgrade skill below.
Bootstrap 5 to Bootstrap 6 cheat sheet
The changes you will meet most often, and what Canvas 8.1 uses.
| What | Bootstrap 5 · Canvas 8.0 | Bootstrap 6 · Canvas 8.1 |
|---|---|---|
| Responsive columns | col-md-6 | md:col-6 |
| Responsive utilities | d-md-none | md:d-none |
| Largest breakpoint name | xxl | 2xl |
| Breakpoint widths | 576 / 768 / 992 / 1200 / 1400px | Canvas keeps the same widths |
| Spacing (1rem margin) | mt-3 | mt-5 |
| Solid buttons | btn btn-primary | btn btn-solid theme-primary |
| Outline buttons | btn btn-outline-secondary | btn btn-outline theme-secondary |
| Muted text | text-muted | fg-2 |
| Modal | div.modal + data-bs-toggle="modal" | dialog.dialog + data-bs-toggle="dialog" |
| Offcanvas | div.offcanvas | dialog.drawer |
| Dropdown | dropdown-menu + data-bs-toggle="dropdown" | Menu + data-bs-toggle="menu" |
| Accordion | accordion-collapse | details.accordion-item + summary |
| Checks, radios, switches | form-check | form-field with check / radio / switch |
| Carousel autoplay | data-bs-ride="carousel" | data-bs-autoplay="true" |
| JavaScript | UMD bundle, jQuery plugin calls | ES module, bootstrap.Dialog / Drawer / Menu |
| Sass | @import | @use modules |
Spacing numbers are renumbered by value: 2 → 3, 3 → 5, 4 → 7, 5 → 12. The full list is in UPGRADE.md in the package.
Bootstrap 6, with the Canvas look you know
Moving to a new Bootstrap major usually means a new look. Not here: Canvas 8.1 matches Canvas 8.0 page for page, so your designs carry over.
- The same colours, spacing, typography and component sizes as Canvas 8.0
- Pages stay light for visitors whose system is in dark mode. Dark mode is opt-in, as before
- Navbars expand at the usual breakpoints
display-*,leadandfs-*keep their Canvas 8.0 sizes- Canvas classes that Bootstrap 6 now uses get a
cnvs-prefix, such ascnvs-menu-itemandcnvs-form-group
Everything in the Canvas 8.1 package
One download covers business, portfolio, shop, blog and landing page sites, all on Bootstrap 6 and all with the same components.
Upgrading from Bootstrap 5 or Canvas 8.0
Three ways to move an existing site, at your own pace.
Let your AI agent do it
Download the Canvas 8.0.x → 8.1 upgrade skill from your dashboard. Claude Code, Codex or Cursor converts your pages, CSS and JavaScript into a copy of your site, keeps your content and writes a report.
Get the upgrade skill →Follow the guide
The package includes UPGRADE.md with the 8.0.x → 8.1.0 steps: renamed classes, rebuilt components, JavaScript changes and the Sass build.
Read the 8.1.0 release notes →Stay on Bootstrap 5 for now
Not ready to move? The Canvas 8.0.x version you downloaded stays yours to use, and CanvasBuilder AI still exports Bootstrap 5 HTML.
Try CanvasBuilder AI →Bootstrap 6 is in alpha
Canvas 8.1 uses Bootstrap 6.0.0-alpha.1, the first public release, published in October 2026. We keep Canvas updated as Bootstrap 6 moves toward a stable release, and updates are free with your license. Bootstrap 6 needs current Chrome, Edge or Firefox, or Safari 18 and newer.
Get the Bootstrap 6 template
Every license includes the full Canvas 8.1 package on Bootstrap 6.
Single Site
- License for 1 site
- 20 CanvasBuilder credits
- Full Canvas package
- New demos every week
- 6 months of support
Unlimited Sites
- Unlimited sites
- 100 CanvasBuilder + 25 Service credits / year
- Team accounts for 10 members
- 1 year of support & updates, renewed yearly
- New demos every week
Lifetime Unlimited
- Unlimited sites
- Lifetime free updates
- 1 year of support
- 200 CanvasBuilder + 50 Service credits
- Team accounts for 10 members
Need OEM or SaaS rights? Enterprise is $399/yr → · Prefer ThemeForest? Buy Canvas on ThemeForest for $16 →
Bootstrap 6 template FAQ
Straight answers about Canvas on Bootstrap 6. Updated November 2026.