Bootstrap 6 Alpha is here: what actually changes for front-end developers

Bootstrap was quiet for years, and then on 8 October 2026 the team shipped 6.0.0-alpha.1, the first alpha of a major rewrite. I've built most of my production sites on Bootstrap 5, so I went through the release notes and migration guide to see what it means for day-to-day front-end work.

Short version: it's a genuinely modern framework now, but it's an alpha with big breaking changes. Learn it today, ship it on client work later.

1. The browser floor jumps, a lot

Bootstrap 6 needs Chrome and Edge 130+, Firefox 132+ and Safari 18+. Bootstrap 5 went back as far as Chrome and Firefox 60 and Safari 12. That's the trade-off that unlocks everything else: there are no fallbacks, prefixes or polyfills below that floor.

In return you get native features like light-dark(), :has(), container queries, oklch(), color-mix() and the native <dialog> element.

2. Customisation moves to CSS tokens

v6 uses the Sass module system (@use / @forward), and @import is no longer supported for customisation. Nearly every v5 Sass variable is now a CSS variable inside a "token map", so you can change the look at runtime, not just at compile time.

@use "../node_modules/bootstrap/scss/bootstrap" with (
  $radius: .25rem,
  $root-tokens: (
    --spacer: 1.5rem,
  ),
  $alert-tokens: (
    --alert-border-radius: var(--radius-8),
  ),
);

The bs prefix also leaves the source. Custom properties are written unprefixed and the namespace is added with PostCSS at build time, so $prefix is gone.

3. Responsive classes now use prefixes

This is the change you'll feel in every template. Responsive and state variants move from an infix to a Tailwind-style prefix:

The xxl breakpoint is also renamed to 2xl.

4. Native HTML replaces JavaScript

• The accordion is built on native <details> and <summary> and animates open and closed in pure CSS.
• A new Dialog component uses the native <dialog> element.
• CSS layers give predictable specificity, with utilities as the top layer.
• Range media queries like (width >= 768px) replace min/max-width hacks.

5. JavaScript is ESM-only and written in TypeScript

There's no UMD bundle and no window.bootstrap global any more. If you only use data attributes such as data-bs-toggle, adding type="module" to the script tag is enough:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

The source is TypeScript and ships its own types, so @types/bootstrap can go. CommonJS require() users need to move to ESM imports. Tooltips and popovers now position with Floating UI instead of Popper.

6. Built for humans and AI agents

This is the part I didn't expect. The docs ship llms.txt and llms-full.txt, and the repo has a skills/ folder of playbooks (including a v5 to v6 migration skill) that you can point a coding agent at. Framework teams are clearly planning for AI-assisted migrations now.

Should you use it yet?

For new personal projects and experiments, yes. For client sites, stay on Bootstrap 5.3 for now.

It's an alpha, and the team says things can still change before beta. Bootstrap 5 is still supported, and v5.4.0 is planned before an end-of-life date is announced. My plan: try v6 on a side project, get used to the prefix syntax and token maps, and migrate client work once it reaches a stable release.

Sources: Bootstrap 6 Alpha announcement, v6 migration guide.