Bootstrap 6 v první alfě píše responzivní třídy jako md:d-none místo d-md-none
Tým Bootstrapu vydal 8. října první alfu šesté verze. Responzivní třídy dostaly předponu podle vzoru Tailwindu, modální okno nahradil nativní prvek dialog a JavaScript vychází jen jako ES moduly. Kdo zůstane na pětce, dostane ještě verzi 5.4.0.
Spoluzakladatel Bootstrapu Mark Otto ohlásil 8. října 2026 na blogu projektu první alfu šesté verze. Na npm leží jako bootstrap@6.0.0-alpha.1 a na GitHubu je vydání v6.0.0-alpha.1 označené jako předběžné. Pátá verze vyšla před pěti lety a od té doby vycházely jen menší verze řady 5. Šestka je přestavba, ne aktualizace: mění názvy tříd, způsob úprav vzhledu, sestavení JavaScriptu i seznam podporovaných prohlížečů. Stávající web na ni bez úprav nepřejde.
Pětka zůstává podporovaná. Tým chce vydat ještě verzi 5.4.0 a teprve potom oznámit, kdy podpora pětky skončí. Datum neuvádí ani pro jedno.
Šestka vyžaduje Chrome 130, Firefox 132 a Safari 18
Šestka potřebuje Chrome a Edge 130, Firefox 132 a Safari 18. Pětka brala i Chrome a Firefox 60 a Safari 12. Důvod je v tom, na čem nová verze stojí: funkce light-dark() pro světlý a tmavý režim, selektor :has(), dotazy na velikost kontejneru, barvy v oklch() míchané přes color-mix() a nativní prvek <dialog>. Pro starší prohlížeče nemá žádné náhradní cesty ani polyfilly. Migrační příručka to říká rovnou: ve starších prohlížečích se stránka nevykreslí správně, takže se před přechodem vyplatí podívat do vlastní analytiky.
Třídy dostaly předponu podle vzoru Tailwindu
Nejviditelnější změna je zápis tříd. Velikost obrazovky i stav jako najetí myší se v pětce psaly doprostřed nebo na konec názvu, v šestce stojí na začátku a od zbytku je dělí dvojtečka. Otto na blogu otevřeně přiznává, že jde o kopii Tailwindu. V HTML se dvojtečka píše tak, jak je. Přejmenovaly se i celé komponenty:
| Bootstrap 5 | Bootstrap 6 |
|---|---|
d-md-none | md:d-none |
col-lg-6 | lg:col-6 |
opacity-50-hover | hover:opacity-50 |
offcanvas-md | md:drawer |
modal, modal-header | dialog, dialog-header |
dropdown-menu, dropdown-item | menu, menu-item |
btn-primary, alert-primary | theme-primary u tlačítka, upozornění, tabulky i dalších |
Barevné varianty už nejsou zvláštní třída pro každou komponentu. Třída theme-primary nastaví sadu proměnných jako --theme-bg nebo --theme-fg a tlačítko, upozornění či tabulka si z nich barvu vezmou samy. Posunuly se také hranice velikostí obrazovky, takže rozvržení na širších displejích se může zlomit jinde než dřív:
| Hranice | Bootstrap 5 | Bootstrap 6 | Šířka kontejneru 5 → 6 |
|---|---|---|---|
| lg | 992 px | 1 024 px | 960 px beze změny |
| xl | 1 200 px | 1 280 px | 1 140 → 1 200 px |
| xxl, nově 2xl | 1 400 px | 1 536 px | 1 320 → 1 440 px |
Vzhled se ladí CSS proměnnými, Sass zůstává na výpočty
Zdrojové styly přešly na modulový systém Sassu, tedy na @use a @forward. Úpravy přes @import šestka nepodporuje. Skoro každá proměnná Sassu z pětky je teď CSS proměnná uložená v takzvané mapě tokenů. Každá komponenta má svou mapu, globální hodnoty drží $root-tokens. Vlastní nastavení vypadá takhle:
@use "bootstrap/scss/bootstrap" with (
$radius: .25rem,
$root-tokens: (
--spacer: 1.5rem,
),
$alert-tokens: (
--alert-padding-x: calc(var(--spacer) * 2),
),
);Protože jde o CSS proměnné, dají se měnit i za běhu v prohlížeči a komponenty se přizpůsobí hned, bez nového sestavení. Zaoblení rohů má deset stupňů odvozených z jediné hodnoty $radius, mezery podobně z $spacer. Předpona bs- ve zdroji chybí a přidává ji až PostCSS při sestavení, proměnná $prefix proto zmizela. Zmizely i soubory _variables.scss, _variables-dark.scss a _maps.scss; zbylé globální volby jsou v _config.scss, _colors.scss a _theme.scss. Celý framework je rozdělený do vrstev @layer, utility leží v té nejvyšší. Proměnné typu --bs-primary-rgb a barvy přes rgba() ze šestky vypadly.
JavaScript jen jako ES moduly
Balík UMD a globální objekt window.bootstrap v šestce nejsou. Kdo používá jen datové atributy jako data-bs-toggle, přidá ke značce <script> atribut type="module". Projekty s require() z CommonJS musí přejít na import. U nástrojů jako Vite, Webpack nebo Parcel zůstávají importy stejné a import { Tooltip } from 'bootstrap' podle oznámení nově správně vynechá nepoužitý kód. Podpora jQuery skončila úplně.
Zdrojový kód skriptů je v TypeScriptu a balík nese vlastní typové deklarace, takže @types/bootstrap jde ze závislostí pryč. Polohu bublin a nabídek místo Popperu počítá @floating-ui/dom; nová komponenta Datepicker potřebuje ještě vanilla-calendar-pro. Modální okno nahradila komponenta Dialog postavená na <dialog> a jeho metodách showModal() a close(). Tmavé pozadí, zachycení fokusu i zákaz posunu stránky tak obstará prohlížeč a Bootstrap kvůli tomu smazal tři vlastní pomocné moduly. Akordeon stojí na prvcích <details> a <summary> a JavaScript nepotřebuje vůbec. Přejmenované jsou i události, třeba shown.bs.modal je teď shown.bs.dialog.
Pro přechod připravil tým návody přímo pro programovací agenty. V repozitáři je nová složka skills/ s postupem z pětky na šestku a zvlášť ze čtyřky na šestku, dokumentace vychází i jako prostý text llms.txt a llms-full.txt. Příručka přitom doporučuje změny od agenta zkontrolovat proti ní.
Na pětce běží menšina webů s Bootstrapem
Podle W3Techs používalo Bootstrap 29. října 14,5 % všech webů. Heise s odkazem na tutéž službu psal o 13,8 % na začátku srpna a o 15,3 % v prosinci 2025. Pátou řadu má podle W3Techs jen 10,7 % webů s Bootstrapem, čtyřku 21,4 % a trojku 28,2 %. Většina webů s Bootstrapem tak běží na řadách, ze kterých nepřešly ani na pětku.
Alfa není hotová verze. Před betou a kandidátem na vydání chce tým vydat další alfy a do té doby se může leccos změnit. Blog slíbil sérii šesti dalších článků o barvách, komponentách, mřížce, formulářích, utilitách a skriptech; k 29. říjnu vyšel jen ten první. Sedmička má podle Otta přijít rychleji než dřívější velké verze. Šestka se zatím obejde bez funkcí jako CSS Anchor Positioning, se kterými počítá až další verze.