Bootstrap 6 Alpha: What's New and Should You Upgrade?

Bootstrap 6.0.0-alpha.1 was released on October 8, 2026. It is the biggest change to Bootstrap since version 4: the Sass is rewritten with modules and design tokens, the CSS uses cascade layers and oklch() colors, responsive classes change from d-md-none to md:d-none, the JavaScript is ESM-only TypeScript, and several components have new names. This guide covers what changed, based on the official release post and the alpha package on npm, how to try it, and whether you should upgrade now. Bootstrap 5.3.9, released on November 11, 2026, is still the stable version, and everything on bootstrap.build uses it.

Bootstrap 6 at a glance

The CSS sizes are what we measured from each package’s bootstrap.min.css with gzip. Part of the difference is that Bootstrap 6 includes more components in its default build.

How to try Bootstrap 6

Install the alpha from npm with its version number. It’s published under the next tag, so a plain npm i bootstrap still installs 5.3.9:

npm i bootstrap@6.0.0-alpha.1

Or load it from jsDelivr. The script now needs type="module":

<link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>

The documentation is at getbootstrap.com/docs/6.0, with a migration guide. Try it on a new project or a branch, not on a production site.

Responsive classes use a prefix

The most visible change. Breakpoints move from the middle of the class name to a prefix, and the same syntax is used for states such as hover:

If you’ve used Tailwind, this will look familiar. In CSS the colon is escaped, so a custom selector for md:d-none is written .md\:d-none. In Sass, the breakpoint-infix() function is now breakpoint-prefix().

New breakpoints

The large breakpoints change: lg moves from 992px to 1024px, xl from 1200px to 1280px, and xxl (1400px) is replaced by 2xl at 1536px. sm and md stay at 576px and 768px. Media queries use the range syntax, such as (width >= 768px), and container queries are supported. Layouts that depend on the exact lg and xl widths will shift, so check them when you migrate. The Bootstrap 5 breakpoints guide lists the current values.

Components with new names

From the alpha package, several components are renamed or rebuilt:

Colors work through a theme-* class that sets a group of variables, so the same theme-danger class colors a button, a badge, or an alert. The theme names are primary, accent, secondary, success, danger, warning, info, and inverse, with no separate light and dark.

The alpha also adds new components: avatar, chip, stepper, combobox, a datepicker (built on Vanilla Calendar Pro), an OTP code input, a password strength meter, and nav overflow, which moves nav links into a menu when they don’t fit. All of this can still change before the stable release.

Sass and theming

Bootstrap 6 uses the Sass module system. @import is no longer supported for customizing Bootstrap. Instead of overriding variables such as $primary in _variables.scss, you change token maps:

• Each component has a token map named after it, such as $alert-tokens or $button-tokens.
• Global tokens go in $root-tokens.
• A new defaults() function merges your overrides into a map instead of replacing it.
• $spacer sets the spacing scale, and $radius sets a ten-step radius scale.
• _variables.scss, _variables-dark.scss, and _maps.scss are gone. The remaining options live in _config.scss, _colors.scss, and _theme.scss.
• $prefix is removed. Custom properties are written without the --bs- prefix in the source and namespaced at build time with PostCSS.

This means Bootstrap 5 themes, including themes exported from bootstrap.build, won’t apply to Bootstrap 6 without changes.

CSS: layers, oklch, and light-dark

• Cascade layers. Bootstrap’s CSS is ordered in @layer blocks, with utilities on top, so utility classes win without !important battles and your own unlayered CSS overrides Bootstrap easily.
• oklch colors. The palette is defined with oklch() and mixed with color-mix(), which gives more even steps between shades.
• light-dark(). Dark mode uses the native light-dark() function, so components don’t need separate dark styles.

These features are why the browser support floor moves up to recent versions only, with no fallbacks for older browsers.

JavaScript changes

• The plugins are written in TypeScript and ship as ES modules only. There’s no UMD bundle and no window.bootstrap global.
• Data attributes such as data-bs-toggle="dialog" work once the script is loaded with type="module".
• To use the API from the CDN, import it: import { Tooltip } from './bootstrap.bundle.min.js'. With Vite, Webpack, or Parcel, import { Tooltip } from 'bootstrap' still works and is tree-shaken.
• CommonJS require('bootstrap') must move to import.
• Types are included, so @types/bootstrap can be removed.
• Tooltips, popovers, and menus are positioned with Floating UI instead of Popper.

Should you upgrade to Bootstrap 6 now?

Not for production. It’s an alpha: more alphas, then a beta and release candidates, will follow, and class names may still change. The Bootstrap team says Bootstrap 5 will stay supported, with a 5.4.0 release planned and an end-of-life date to be announced.

What to do now:

• Keep shipping on Bootstrap 5.3.9. It’s the current stable release, and it’s what the bootstrap.build builder, themes, and templates use.
• Avoid deprecated 5.x patterns in new code, such as text-muted and @import-only Sass setups, so the move is smaller later.
• Try the alpha on a side project to see how the prefix classes, dialogs, and token maps work.
• If you’re choosing a framework now, our Bootstrap vs Tailwind comparison covers how the two differ today.

FAQ

Is Bootstrap 6 released?

Bootstrap 6 is in alpha. Version 6.0.0-alpha.1 was released on October 8, 2026. It isn’t recommended for production yet, and there’s no date for the stable release. Bootstrap 5.3.9 is the current stable version.

How do I install Bootstrap 6?

Run npm i bootstrap@6.0.0-alpha.1, or load the CSS and JavaScript from jsDelivr with that version number. The script tag needs type="module". A plain npm i bootstrap still installs Bootstrap 5.

What is new in Bootstrap 6?

Prefix responsive classes (md:d-none), new breakpoints (lg 1024px, xl 1280px, 2xl 1536px), Sass modules with token maps, CSS cascade layers, oklch() colors, native dark mode with light-dark(), ESM-only TypeScript JavaScript, Floating UI instead of Popper, and new or renamed components such as Dialog, Drawer, Menu, avatar, chip, stepper, and datepicker.

Will Bootstrap 5 still be supported?

Yes. The Bootstrap team plans a 5.4.0 release and will announce an end-of-life date for Bootstrap 5 later. Bootstrap 5.3.9 was released in November 2026.

Is Bootstrap 6 like Tailwind?

It borrows some ideas: responsive classes now use a prefix such as md: and hover:, and the large breakpoints match Tailwind’s values. It’s still a component framework, though, with ready-made buttons, dialogs, menus, and forms, while Tailwind gives you utilities to build your own.

Can I use bootstrap.build themes with Bootstrap 6?

Not yet. Bootstrap 6 replaces Sass variables with token maps and renames many classes, so Bootstrap 5 themes don’t apply directly. bootstrap.build builds and exports Bootstrap 5.3 themes.