Today we’re releasing the first alpha version of Bootstrap 6, a major overhaul to the project that modernizes and expands one of the most prolific open source design systems of all time. It’s been incredibly fun and rewarding to work on this over the past year, and I’m excited to share it with you.
Bootstrap 6 has been modernized from the ground up with the Sass module system, support for more native browser APIs and elements, ESM-only JavaScript plugins, and a slew of new CSS standards. We’ve broken this post into separate entries that we’ll publish one-by-one, starting with an overview of v6 and a spotlight on our new Sass & CSS implementation.
You’re probably asking yourself, “Wtf, new Bootstrap? What is this, 2015?” And I don’t blame you. It’s been all quiet on the Bootstrap front for a long time while I’ve focused on Pierre, especially with our work on Diffs, Trees, and Code Storage.
Throughout all of that, I’ve had several nagging ideas for Bootstrap despite humans not writing any more code thanks to AI. And yes, there are tons of design libraries from amazing developers now. Still, the reason we made Bootstrap in the first place has never been more relevant.
To help people build more software, faster and easier.
There’s never been more people building software than today, and I imagine that will continue to be true every day, for the rest of our lives. It’s already been installed over 1.75 billion times since its release in 2011. So, Bootstrap 6 is here to continue being an open source design system for anyone—human or AI, novice or pro.
We hope you love it, and thanks to everyone who’s supported the project over the years.
Before we get to the good parts, I want to thank my co-maintainer, Julien, for all the amazing work he’s put into Bootstrap over the last couple of years. Without him, I’d be underwater on reviews, dependencies, migrations, and more. He’s an absolute legend and Bootstrap owes him a tremendous amount of gratitude and appreciation.
Huge thanks to everyone who contributed to the v6 development branch as well:
And most importantly, thanks to everyone who has backed Bootstrap on Open Collective and every contributor who filed an issue, sent a patch, or argued with me in a pull request.
Bootstrap 6 Alpha 1 is on npm and jsDelivr right now.
npm i bootstrap@6.0.0-alpha.1\nOr grab it from the CDN. Be mindful that our JavaScript is ESM-only in v6, so the <script> tag needs type="module".
npm i bootstrap@6.0.0-alpha.1
<script>
type="module"
<link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet">\n<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
Then read our Install or Quickstart pages. If you’re coming from v5, read the next section first, then the migration guide.
130+
132+
18+
Bootstrap 6 requires Chrome and Edge 130, Firefox 132, and Safari 18. For comparison, v5 supported browsers as far back as Chrome and Firefox 60 and Safari 12. This new support floor is because we’re building with browser features that weren’t available a few years ago: light-dark(), :has(), container queries, oklch(), color-mix(), the native <dialog> element, and more. This means v6 includes no fallbacks, prefixes, or polyfills below that floor.
light-dark()
:has()
oklch()
color-mix()
<dialog>
This doesn’t get us features like CSS Anchor Positioning, full pretty text support, or contrast color in Safari yet, but we expect to have a v7 sooner than our past major releases.
Bootstrap 5 remains available and supported if that floor doesn’t work for your project. v5.4.0 will be released as soon as we can before we share an end of life date for Bootstrap 5.
Updating Bootstrap to use Sass modules was a massive undertaking that couldn’t happen in v5 without some breaking changes. So we went big in v6.
Bootstrap 6 uses the @use/@forward module system, and customization now happens via token maps. Sass is still used for programmatic customization (generating component variants, utilities, functions, etc), while all visual customization happens with CSS.
@use
@forward
Token maps are Sass maps that house all our CSS variables for both global settings in :root and on our individual components. This normalizes the path to customizing and focuses Bootstrap on the future of CSS, with a strong preprocessor foundation for managing large codebases. Nearly every Sass variable from v5 is now a CSS variable in a token map. This also means you can customize Bootstrap’s CSS variables at runtime, rather than just before compilation.
:root
Here’s how this approach looks in a component like alert:
$alert-tokens: () !default;\n$alert-tokens: defaults(\n (\n --alert-padding-x: var(--spacer),\n --alert-border-radius: var(--radius-5),\n --alert-bg: var(--theme-bg-subtle, var(--bg-1)),\n // …\n ),\n $alert-tokens\n);\n@layer components {\n .alert {\n @include tokens($alert-tokens);\n // Rest of alert styles…\n }\n}
Practically speaking, this means that virtually all our Sass variables from v5 are now CSS variables in a token map. The handful of remaining global Sass options now live in _config.scss, _colors.scss, and _theme.scss.
_config.scss
_colors.scss
_theme.scss
At the :root level where we emit the most tokens programmatically with Sass functions:
$root-tokens: () !default;\n$root-tokens: defaults(\n (\n // Individually set CSS variables…\n )\n $root-tokens\n);\n// Most root tokens are loop-generated\n@each $key, $value in $theme-bgs {\n $root-tokens: map.set($root-tokens, --bg-#{$key}, $value);\n}
The defaults() function ensures anyone who adds new tokens to a token map, or overrides an existing token value, gets just that in their output—a new CSS variable or a new value for an existing one. It merges rather than replaces, so you never have to redeclare a map to change one value in it, and you can add tokens of your own alongside ours. Speaking of, here’s how to customize those tokens in the new module system with token maps.
defaults()
Import Bootstrap via @use ... with and start modifying un-namespaced token maps. You can override root tokens with the $root-tokens map; components get their own unique token map named after the component. Additionally, this is how you customize the few global Sass variables we have left.
@use ... with
$root-tokens
@use "../node_modules/bootstrap/scss/bootstrap" with (\n // Manage global options\n $enable-smooth-scroll: true,\n // Move the entire radius scale by changing its base\n $radius: .25rem,\n // Modify global tokens\n $root-tokens: (\n --spacer: 1.5rem,\n --focus-ring-width: 3px,\n ),\n // Modify component tokens\n $alert-tokens: (\n --alert-padding-x: calc(var(--spacer) * 2),\n --alert-border-radius: var(--radius-8),\n ),\n);
Notice that the tokens have no bs prefix here. In v5 the prefix was a Sass variable, $prefix, threaded through every declaration. In v6 we write custom properties unprefixed in the source and add the namespace with PostCSS at build time, so $prefix is gone and you configure the prefix in your PostCSS config instead.
bs
$prefix
The $radius line is worth calling out, too. Our radius scale is derived from a single base value, so changing that one number moves all ten steps together and every component that reads them follows. Same story for $spacer and the spacing scale.
$radius
$spacer
This gives us the most flexible system possible using both Sass and CSS, with the advantage of customizing either before or after compilation. Update global tokens in the browser, and downstream components update in real time. This is a massive improvement over v5’s hybrid Sass-CSS system, and one I hope you’ll love.
Padding follows the spacer, corners follow the radius.
.token-demo {\n --bs-radius-5: 0.5rem;\n --bs-spacer: 1rem;\n --bs-primary-base: var(--bs-blue-500);\n --bs-primary-bg: var(--bs-primary-base);\n --bs-primary-bg-subtle: light-dark(var(--bs-blue-100), var(--bs-blue-900));\n --bs-primary-fg: light-dark(var(--bs-blue-600), var(--bs-blue-400));\n --bs-primary-border: light-dark(var(--bs-blue-300), var(--bs-blue-600));\n}
A super obvious and breaking change in v6 is moving from the infix to a prefix for our responsive utilities and component variants. Yes, this is a direct copy of how Tailwind does responsive, and yes, it’s better than what felt like a randomly positioned infix in v5.
Here’s a look at the before and after on some Bootstrap classes:
.d-md-none
.md:d-none
.col-lg-6
.lg:col-6
.opacity-50-hover
.hover:opacity-50
.justify-content-md-end
.md:justify-content-end
.offcanvas-md
.md:drawer
This change applies to all utilities, components, grid layouts, and more. It also include state modifiers like :hover, :focus, etc. Same ergonomics for all of them.
:hover
:focus
If you have custom Sass built on our breakpoint helpers, breakpoint-infix() is now breakpoint-prefix() and returns a prefix string, and the loop-breakpoints-up and loop-breakpoints-down mixins expose $prefix instead of $infix.
breakpoint-infix()
breakpoint-prefix()
loop-breakpoints-up
loop-breakpoints-down
$infix
Bootstrap 6 has been overhauled to use as many of the latest browser-native features as possible, alongside updated build tooling. This makes Bootstrap more accessible, easier to customize, and primed for future browser updates. Alongside that, we’ve rewritten our source Sass around the modern module system and newer versions of Dart Sass. @import is deprecated and no longer supported for customization; use @use and @forward instead.
@import
Sass files have also been reorganized, and several Sass files have been removed given the change to CSS variables for all visual customization, automatic color-mode adaptivity via light-dark(), and more. We’ve also cleaned up the shenanigans around the _maps.scss file, _variables.scss and _variables-dark.scss, both of which are no more.
_maps.scss
_variables.scss
_variables-dark.scss
On the HTML and CSS side of things, some highlights include:
utilities
(width >= 768px)
<details>
<summary>
:where()
content-visibility
allow-discrete
interpolate-size
::details-content
@property
On the JS and tooling side:
window.bootstrap
data-bs-toggle
import { Tooltip } from './bootstrap.bundle.min.js'
import { Tooltip } from 'bootstrap'
sideEffects
require()
.ts
@types/bootstrap
bootstrap/js/src/alert.js
Bootstrap 6 includes LLM-friendly documentation and skill files for all your agentic coding needs.
To be more efficient with agents, we have text-only versions of our documentation. llms.txt is a curated index of every documentation page with descriptions while llms-full.txt is all of our documentation concatenated into one file.
llms.txt
llms-full.txt
Skills files have been added to the repository in a new skills/ directory. Skills are playbooks for specific tasks, in this case for working with Bootstrap 6. To start, we’ve drafted skill files for migrating to v6, using Bootstrap with different build tools, authoring components, and more. Point your agent at the relevant file and it’ll follow the correct guidance from us maintainers instead of anything potentially outdated or incorrect.
skills/
We’ve also updated the blog and Icons site with refreshed designs.
The blog has a new homepage, search via Pagefind, new category pages, and new post layouts like the one you’re reading now.
The Icons site has a new homepage, too—immediately oriented around the grid of icons. We’ve added search with PageFind here as well (including ?tag= queries), new sidebar category navigation and category pages, plus a refreshed icon show page.
?tag=
In addition, we’ve built out a new, private repository and package for sharing Bootstrap docs components across the main site, Icons, and Blog. It’s called @twbs/bui and gives us better control as maintainers over all the separate sites without having to fully commit to a monorepo.
@twbs/bui
This is an alpha, so things can still meaningfully change before beta. There will be more alphas before we start stabilizing through the beta and RC stages. Share any and all feedback you have and we’ll do our best to address:
Thanks again to everyone who contributed, thanks for reading, and we hope you love Bootstrap 6!