--- title: Bootstrap 6 Alpha | daily.dev description: Bootstrap 6 Alpha 1 has shipped, marking a major overhaul of the design system with a new Sass module system (@use/@forward), CSS token maps replacing Sass... canonical: https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Bootstrap 6 Alpha | daily.dev og:description: Bootstrap 6 Alpha 1 has shipped, marking a major overhaul of the design system with a new Sass module system (@use/@forward), CSS token maps replacing Sass... og:url: https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws og:image: https://api.daily.dev/og/posts/k0pYA6Bws.png og:image:alt: Bootstrap 6 Alpha og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Bootstrap 6 Alpha **[Bootstrap](https://daily.dev/sources/bootstrap)** · 12 min read · 45 upvotes · 4 comments ## Summary Bootstrap 6 Alpha 1 has shipped, marking a major overhaul of the design system with a new Sass module system (@use/@forward), CSS token maps replacing Sass variables, ESM-only JavaScript plugins, and native browser features like light-dark(), :has(), container queries, oklch(), color-mix(), and the

element. The new browser support floor is Chrome/Edge 130, Firefox 132, and Safari 18, dropping legacy fallbacks and polyfills. Responsive utilities now use a Tailwind-style prefix instead of an infix (e.g. .md:d-none instead of .d-md-none), TypeScript is now the source language, Rolldown replaces Rollup/Babel, and Vitest with Playwright replaces Karma. Bootstrap 5 remains supported, with v5.4.0 planned before an end-of-life date is announced. The release also adds llms.txt documentation and agent skill files for AI-assisted coding workflows. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What browsers does Bootstrap 6 require compared to Bootstrap 5? Bootstrap 6 requires Chrome and Edge 130, Firefox 132, and Safari 18, with no fallbacks, prefixes, or polyfills below that floor. Bootstrap 5, by comparison, supported browsers as far back as Chrome and Firefox 60 and Safari 12. The higher floor lets Bootstrap 6 use native features like light-dark(), :has(), container queries, oklch(), color-mix(), and the

element. _Teams planning a Bootstrap 6 upgrade can track browser support shifts like this one on daily.dev._ ### How do Bootstrap 6's responsive utility class names change from Bootstrap 5? Bootstrap 6 moves the breakpoint from an infix to a prefix, matching Tailwind's convention. For example, .d-md-none becomes .md:d-none, .col-lg-6 becomes .lg:col-6, .opacity-50-hover becomes .hover:opacity-50, and .offcanvas-md is intentionally renamed to .md:drawer. This applies to all utilities, components, grid layouts, and state modifiers like :hover and :focus. _Developers migrating Bootstrap class names can keep ahead of breaking changes like this via daily.dev._ ### How does Bootstrap 6's new Sass token map system differ from Sass variables in Bootstrap 5? Bootstrap 6 replaces nearly all Sass variables with CSS variables organized into Sass token maps, using the @use/@forward module system instead of @import. A defaults() function merges new or overridden tokens without requiring a full map redeclaration, and tokens can now be customized at runtime in the browser rather than only before compilation, unlike v5's compile-time-only Sass variables. _Developers evaluating Bootstrap's new customization model can follow framework migration details on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@zenotds** · 11 upvotes > Used BS for the better part of the last 10 years.. and dropped it completely a couple years ago.. > > It feels like most of the people moved out of "rigid" frameworks and SASS anyway. > > Vanilla CSS came a looooong way and Tailwind is de facto "the standard" in the utility framework space, love it or hate it (for good reasons). > > This looks like a DOA update.. too little, too late. But i hope it's somewhat successful because i still remember it fondly. **@diyweb** · 7 upvotes > Moving to native CSS like :has(), container queries and light-dark() is the most interesting part for me. Even if Tailwind won the mindshare, a lot of existing projects run on Bootstrap and will be glad to have a clean upgrade path. **@apperside** · 3 upvotes > Is bootstap really still alive?? I didn't heard even one time about it in the last years **@hieu\_vipro** · 0 upvotes > out meta ## Similar posts on daily.dev - [Frontend Wrapped 2025: The 10 storylines that defined the year](https://daily.dev/posts/frontend-wrapped-2025-the-10-storylines-that-defined-the-year-isyrzznkt) · LogRocket · 3 upvotes · 1 comments - [webpack](https://daily.dev/posts/webpack-xfuofstyh) · webpack · 7 upvotes · 5 comments - [Slint 1.18 Released](https://daily.dev/posts/slint-1-18-released-qsjr785iv) · Slint · 36 upvotes · 1 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#bootstrap-css](https://daily.dev/tags/bootstrap-css) [View this post on daily.dev](https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Bootstrap 6 Alpha","url":"https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws"},"datePublished":"2026-10-08T17:30:03.360Z","dateModified":"2026-10-08T18:19:13.277Z","description":"Bootstrap 6 Alpha 1 has shipped, marking a major overhaul of the design system with a new Sass module system (@use/@forward), CSS token maps replacing Sass...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f92ffd8f506843bd90b6e5fe51ea696b?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f92ffd8f506843bd90b6e5fe51ea696b?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Bootstrap","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Bootstrap","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/ea4f1ba8a2d6493e853e77a6002c9c00","url":"https://daily.dev/sources/bootstrap"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":45},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"javascript,css,bootstrap-css","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Bootstrap","item":"https://daily.dev/sources/bootstrap"},{"@type":"ListItem","position":3,"name":"Bootstrap 6 Alpha"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws","comment":[{"@type":"Comment","text":"Used BS for the better part of the last 10 years… and dropped it completely a couple years ago…\nIt feels like most of the people moved out of “rigid” frameworks and SASS anyway.\nVanilla CSS came a looooong way and Tailwind is de facto “the standard” in the utility framework space, love it or hate it (for good reasons).\nThis looks like a DOA update… too little, too late. But i hope it’s somewhat successful because i still remember it fondly.","datePublished":"2026-10-09T08:06:22.438Z","dateModified":"2026-10-09T08:08:20.967Z","url":"https://daily.dev/posts/k0pYA6Bws#c-mOLM7KPSN","author":{"@type":"Person","name":"Francesco Selva","url":"https://daily.dev/zenotds","image":"https://lh3.googleusercontent.com/a/ACg8ocIpqD53L1hQKWDfCVp2Ism-fJxG-bPsCDBdtXDvbOINuMjP0oke=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":11}},{"@type":"Comment","text":"Moving to native CSS like :has(), container queries and light-dark() is the most interesting part for me. Even if Tailwind won the mindshare, a lot of existing projects run on Bootstrap and will be glad to have a clean upgrade path.","datePublished":"2026-10-10T16:20:23.549Z","url":"https://daily.dev/posts/k0pYA6Bws#c-wTpaep2PI","author":{"@type":"Person","name":"DiyWeb","url":"https://daily.dev/diyweb","image":"https://media.daily.dev/image/upload/s--dgS6jDeN--/f_auto/v1790879420/avatars/avatar_774zDwMaRTNS1fv5OKStX?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"Is bootstap really still alive?? I didn’t heard even one time about it in the last years","datePublished":"2026-10-10T00:35:15.425Z","url":"https://daily.dev/posts/k0pYA6Bws#c-0w7S2w8AG","author":{"@type":"Person","name":"Apperside","url":"https://daily.dev/apperside","image":"https://avatars.githubusercontent.com/u/5955338?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"out meta","datePublished":"2026-10-09T09:24:00.570Z","url":"https://daily.dev/posts/k0pYA6Bws#c-aJrTEkpyr","author":{"@type":"Person","name":"Trung Hieu Ngo","url":"https://daily.dev/hieu_vipro","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/bootstrap-6-alpha-k0pya6bws#faq","mainEntity":[{"@type":"Question","name":"What browsers does Bootstrap 6 require compared to Bootstrap 5?","acceptedAnswer":{"@type":"Answer","text":"Bootstrap 6 requires Chrome and Edge 130, Firefox 132, and Safari 18, with no fallbacks, prefixes, or polyfills below that floor. Bootstrap 5, by comparison, supported browsers as far back as Chrome and Firefox 60 and Safari 12. The higher floor lets Bootstrap 6 use native features like light-dark(), :has(), container queries, oklch(), color-mix(), and the

element. Teams planning a Bootstrap 6 upgrade can track browser support shifts like this one on daily.dev."}},{"@type":"Question","name":"How do Bootstrap 6's responsive utility class names change from Bootstrap 5?","acceptedAnswer":{"@type":"Answer","text":"Bootstrap 6 moves the breakpoint from an infix to a prefix, matching Tailwind's convention. For example, .d-md-none becomes .md:d-none, .col-lg-6 becomes .lg:col-6, .opacity-50-hover becomes .hover:opacity-50, and .offcanvas-md is intentionally renamed to .md:drawer. This applies to all utilities, components, grid layouts, and state modifiers like :hover and :focus. Developers migrating Bootstrap class names can keep ahead of breaking changes like this via daily.dev."}},{"@type":"Question","name":"How does Bootstrap 6's new Sass token map system differ from Sass variables in Bootstrap 5?","acceptedAnswer":{"@type":"Answer","text":"Bootstrap 6 replaces nearly all Sass variables with CSS variables organized into Sass token maps, using the @use/@forward module system instead of @import. A defaults() function merges new or overridden tokens without requiring a full map redeclaration, and tokens can now be customized at runtime in the browser rather than only before compilation, unlike v5's compile-time-only Sass variables. Developers evaluating Bootstrap's new customization model can follow framework migration details on daily.dev."}}]} ```