# Canvas: The Best Bootstrap 6 HTML Template

> Canvas is a Bootstrap 6 HTML template by SemiColonWeb. Canvas 8.1 rebuilds 1,400+ templates, 240+ demos and 2,000+ UI features on Bootstrap 6 (6.0.0-alpha.1) and keeps the look of Canvas 8.0. It is trusted by 75,000+ users and costs from $12.49.

Canonical page: https://canvastemplate.com/bootstrap-6-template. Last updated: 2026-11-02.

## What Bootstrap 6 brings, already built into Canvas

- **Native dialogs:** modals are real `<dialog>` elements with built-in focus handling and an accessible backdrop. Example: https://canvastemplate.com/modal-popovers.html
- **Drawers:** Offcanvas becomes Drawer. Side panels, mobile menus and filters slide in from any edge. Example: https://canvastemplate.com/header-offcanvas-light.html
- **The Menu component:** dropdowns are now Menus, positioned with Floating UI and keyboard accessible. Example: https://canvastemplate.com/navigation.html
- **Accordions on details:** Bootstrap accordions use native `<details>` and `<summary>`, so they open and close before JavaScript loads. Example: https://canvastemplate.com/toggles-accordions.html
- **New form fields:** checks, radios and switches use the `.form-field` markup. Example: https://canvastemplate.com/form-fields.html
- **Responsive prefix syntax:** `md:col-6` instead of `col-md-6`, and `xxl` is now `2xl`. Example: https://canvastemplate.com/columns-grids.html
- **Also new:** CSS cascade layers, ES-module JavaScript, `theme-*` colour variants, container queries and a modern colour system.

## Bootstrap 5 to Bootstrap 6 cheat sheet

| 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 Canvas look, kept

- 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-*`, `lead` and `fs-*` keep their Canvas 8.0 sizes.
- Canvas classes that Bootstrap 6 now uses get a `cnvs-` prefix, for example `cnvs-menu-item` and `cnvs-form-group`.

## Everything in the Canvas 8.1 package

1,400+ HTML templates, 240+ demos, 2,000+ UI features, 60+ shortcode elements, Slider Revolution with 140+ hero templates, full SCSS source and a Gulp build, dark mode, RTL support, jQuery 4 and Swiper 12, and free updates.

## Upgrading from Bootstrap 5 or Canvas 8.0

- **AI agent:** download the Canvas 8.0.x → 8.1 upgrade skill from https://dashboard.canvastemplate.com/downloads. Claude Code, Codex or Cursor converts your pages, CSS and JavaScript into a copy of your site, keeps your content and writes a report.
- **Guide:** follow UPGRADE.md in the package. Release notes: https://docs.canvastemplate.com/version-8-1-0
- **Stay on Bootstrap 5:** the Canvas 8.0.x version you downloaded stays yours to use, and CanvasBuilder AI (https://canvasbuilder.co/) still exports Bootstrap 5 HTML.

Bootstrap 6 is in alpha. Canvas 8.1 uses Bootstrap 6.0.0-alpha.1, published on 8 October 2026, and is updated as Bootstrap 6 moves toward a stable release. Bootstrap 6 needs current Chrome, Edge or Firefox, or Safari 18 and newer.

## Pricing

- **Single Site:** $12.49 one-time. 1 site, 20 CanvasBuilder credits, 6 months of support.
- **Unlimited Sites:** $49 per year. Unlimited sites, 100 CanvasBuilder and 25 Service credits per year, team accounts for 10 members, 1 year of support and updates, renewed yearly.
- **Lifetime Unlimited:** $149 one-time. Unlimited sites, lifetime free updates, 1 year of support, 200 CanvasBuilder and 50 Service credits, team accounts for 10 members.
- **Enterprise:** $399 per year, with OEM and SaaS rights.
- **ThemeForest:** $16 one-time for 1 site.

Buy at https://dashboard.canvastemplate.com/register. Full price list: https://canvastemplate.com/pricing.md

## FAQ

### What is a Bootstrap 6 template?

A Bootstrap 6 template is a ready-made website built on Bootstrap 6, the next major version of the Bootstrap framework. Canvas 8.1 is a Bootstrap 6 template: all 1,400+ templates, 240+ demos and 2,000+ UI features use Bootstrap 6 classes, components and JavaScript.

### Is Bootstrap 6 stable?

Not yet. Canvas 8.1 is built on Bootstrap 6.0.0-alpha.1, the first public release of Bootstrap 6. Canvas keeps the look of Canvas 8.0 and is updated as Bootstrap 6 moves toward a stable release. Updates are free with your license.

### Which browsers does a Bootstrap 6 site support?

Bootstrap 6 needs a current browser: Chrome, Edge or Firefox, or Safari 18 and newer. It relies on modern CSS such as cascade layers, the oklch() colour space and container queries.

### Can I still use Bootstrap 5 with Canvas?

Yes. If a project has to stay on Bootstrap 5, keep using the Canvas 8.0.x version you already downloaded. It stays yours to use. CanvasBuilder AI also still exports Bootstrap 5 HTML.

### How do I upgrade a Canvas 8.0 site to Bootstrap 6?

Download Canvas 8.1 and the Canvas 8.0.x to 8.1 upgrade skill from your dashboard. Your AI coding agent then converts your pages, CSS and JavaScript into a copy of your site and writes a report. You can also follow UPGRADE.md in the package step by step.

### What changes in my own code?

Responsive classes move to the prefix syntax (md:col-6), the spacing scale is renumbered, Modal becomes Dialog, Offcanvas becomes Drawer and Dropdown becomes Menu. Canvas classes that clash with Bootstrap 6 get a cnvs- prefix, such as cnvs-menu-item and cnvs-form-group.