Zuerst die Abhängigkeiten, sonst baut nichts übersetzbar durch.

• bootstrap in der package.json auf die 6er-Version ziehen (derzeit 6.0.0-alpha.1).
• @popperjs/core raus, @floating-ui/dom rein. Tooltip, Popover und Menu positionieren jetzt mit Floating UI.
• Nur für den neuen Datepicker zusätzlich vanilla-calendar-pro – eine Peer-Abhängigkeit, die Bootstrap nicht selbst mitbringt.

Im eigenen Sass wird aus dem Import ein @use:

// vorher
@import "bootstrap/scss/bootstrap";

// jetzt
@use "bootstrap/scss/bootstrap";

Das ist mehr als eine Schreibweise: @use lädt eine Datei genau einmal und kapselt ihren Namensraum. Bootstraps Variablen stehen danach nicht mehr automatisch global zur Verfügung – wer sie lesen will, holt sie über den Namensraum oder gibt eigene Werte beim Laden mit (@use "…" with (…)). Reihenfolge und Konfiguration des eigenen Themes muss man dabei einmal sauber sortieren.

Der Breakpoint steht nicht mehr im Klassennamen, sondern davor, getrennt durch einen Doppelpunkt. Statt für jede Utility eine eigene Regel zu kennen, gilt ein Muster: <breakpoint>:<klasse>. Dasselbe für Zustände (hover:) und Medien (print:). xxl heißt 2xl.

Das ist der Posten, der in einem gewachsenen Projekt die meisten Treffer hat. Eine Suche nach -sm-, -md-, -lg-, -xl- und -xxl- findet die Stellen – im Markup wie in Fluid-Templates und in JavaScript, das Klassen setzt.

Drei Komponenten heißen anders, und zwar durchgehend: Klasse, Daten-Attribut, JavaScript-Export, Event-Name und CSS-Variable. Wer nur die Klassen tauscht, lässt die halbe Umstellung liegen.

Modal → Dialog

Offcanvas → Drawer

Dropdown → Menu

Beim Menü fällt zusätzlich Markup weg – der umschließende .dropdown und .dropdown-toggle gibt es nicht mehr. Das steht in Schritt 3.

Die Farbvariante steckt nicht mehr im Komponentennamen. Eine Klasse bestimmt die Form, ein Theme-Token die Farbe – damit lässt sich dieselbe Farbe über Button, Alert und Badge hinweg einheitlich setzen.

Dasselbe gilt für jede andere Variante – secondary, success, info, warning, danger. .theme-light und .theme-dark gibt es nicht; helles und dunkles Erscheinungsbild läuft über das Color Scheme, nicht über eine Variante.

Umbenannte Utilities

Die Umbenennung von .text-* auf .fg-* betrifft nur die Textfarben. Ausrichtung und Größe bleiben, wo sie waren: .text-center und .text-nowrap heißen weiter so. Bei .placeholder-glow und .placeholder-pulse genauso – glow bleibt als Alias erhalten.

Schriftgrößen

Aus den Nummern werden T-Shirt-Größen: .fs-1 bis .fs-6 heißen jetzt .fs-4xl, .fs-3xl, .fs-2xl, .fs-xl, .fs-lg, .fs-md – in dieser Reihenfolge, die größte zuerst. Ab lg aufwärts sind die Größen fließend, skalieren also mit der Viewport-Breite statt in Stufen.

Abstands-Skala

Die Skala hat feinere Stufen bekommen, und die alten Schlüssel stehen jetzt für andere Werte. Wer den Wert behalten will, muss die Zahl ändern:

Gilt für alle Abstands-Utilities, also auch m-*, px-*, gap-* und g-*. .p-1 und .p-0 bleiben, wie sie waren. Wer die Klassen unverändert übernimmt, bekommt kein kaputtes Layout, aber ein deutlich engeres – das ist der Punkt, an dem eine Seite nach der Migration „irgendwie anders“ aussieht. Negative Margins gibt es nur noch für einige wenige Klassen.

Formular-Validierung

Bei diesen Komponenten reicht Suchen und Ersetzen nicht – sie bekommen anderes Markup, meist weniger davon.

Dialog (früher Modal)

Ein einziges natives <dialog class="dialog"> ersetzt die drei verschachtelten div. .modal-dialog und .modal-content entfallen, Kopf, Rumpf und Fuß liegen jetzt direkt im <dialog>. Das Overlay kommt von ::backdrop, der Fokus bleibt vom Browser aus im Dialog.

Drawer (früher Offcanvas)

Auch der Drawer muss ein <dialog> sein – ein div mit der Klasse funktioniert nicht. In der Navbar ersetzt er den Collapse: aus data-bs-toggle="collapse" wird data-bs-toggle="drawer", aus .collapse.navbar-collapse ein <dialog class="drawer"> mit .drawer-header und .drawer-body. .navbar-light und .navbar-dark gibt es nicht mehr.

Accordion

Kein JavaScript mehr, sondern <details> und <summary>:

Neu dazu: .accordion-icon für ein eigenes SVG im <summary>, .accordion-sm und .accordion-gap. Dass nur ein Eintrag offen bleibt, regelt das gleiche name an allen <details> – wie bei Radio-Buttons.

Menü (früher Dropdown)

Der umschließende .dropdown fällt weg, .dropdown-toggle und .dropdown-toggle-split ebenso. Die Liste wird flach: aus <ul><li><a> wird <div class="menu"> mit <a class="menu-item"> darin.

Bootstrap 6 liefert ausschließlich ES-Module. Die UMD-Bundles sind weg, und mit ihnen das globale window.bootstrap – wer eine Komponente braucht, importiert sie.

<!-- vorher -->
<script src="bootstrap.bundle.min.js"></script>
<script>new bootstrap.Tooltip(el);</script>

<!-- jetzt -->
<script type="module">
  import { Tooltip } from './bootstrap.bundle.min.js';
  new Tooltip(el);
</script>

Lebenszyklus-Methoden geben ein Promise zurück

show(), hide(), toggle() und close() lassen sich jetzt awaiten. Wer bisher auf shown.bs.* oder hidden.bs.* gewartet hat, kommt ohne Listener aus – die Events gibt es weiterhin, sie werden nur seltener gebraucht.

// vorher
el.addEventListener('shown.bs.modal', () => { /* … */ });
modal.show();

// jetzt
await dialog.show();
/* … */

Validierung

Der Selektor ändert sich von .needs-validation auf form[data-bs-validate], und die Zeile, die was-validated setzt, kann raus.

Wer Bootstrap nur einbindet, kann diesen Schritt überspringen. Wer eigenes Sass darüber baut, hat hier die meiste Arbeit – und sie fällt beim ersten Build auf, nicht erst im Browser.

Umbenannte und entfallene Dateien

Umbenannte Variablen und Funktionen

Ohne Ersatz entfallen

Eine ganze Reihe von Schaltern und Variablen ist weg, weil die Sache jetzt anders gelöst wird: die caret-Variablen und -Mixins, alle *-focus-box-shadow-Variablen (dafür focus-ring() und --focus-ring-*), die *-scale-Variablen von Alert und List-Group, $enable-dark-mode, $enable-validation-icons, $enable-negative-margins, die RFS-Mixins und create-css-vars(). Die vollständige Liste steht im Original – der Build nennt sie aber auch von selbst.

Utility-API und Theme-Maps

In der Utility-API sind die Optionen css-var, css-variable-name und local-vars entfallen; stattdessen beschreibt man das über property und variables. Die globalen Maps – $theme-colors und Verwandte – werden nicht mehr komplett ersetzt, sondern mit defaults() teilweise überschrieben. Ein Schlüssel auf null entfernt ihn.

Keine -rgb-Variablen mehr

Die $*-rgb-Variablen und die --bs-*-rgb-Eigenschaften gibt es nicht mehr. Transparenz läuft über color-mix():

// vorher
background: rgba(var(--bs-primary-rgb), .5);

// jetzt
background: color-mix(in oklab, var(--bs-primary), transparent 50%);

Drei Komponenten heißen gleich, arbeiten aber anders. Hier ändert sich nicht nur Markup, sondern das Verhalten – auch dort, wo man nichts angepasst hat.

Carousel: jetzt auf CSS-Scroll-Snap

Das Wichtigste daran: Autoplay ist jetzt abgeschaltet, solange man es nicht ausdrücklich einschaltet. Ein Carousel, das vorher von selbst lief, steht nach der Migration still. Überlagerte Bedienelemente brauchen zusätzlich .carousel-overlay.

ScrollSpy: jetzt auf IntersectionObserver

Die Optionen offset und method gibt es nicht mehr. An ihre Stelle tritt topMargin (Vorgabe 12 %), rootMargin bleibt als Feineinstellung für Sonderfälle. Die Standard-Schwelle ist jetzt [0].

Collapse: weniger Zustände

.collapsing ist weg, die toggle-Option ebenso – stattdessen show() oder hide() aufrufen. Eigenes CSS, das am Zustand des Auslösers hängt, läuft nicht mehr über .collapsed, sondern über [aria-expanded="false"].

Interna, die verschwunden sind

Backdrop, Fokus-Falle und Scrollbar-Hilfe braucht Bootstrap nicht mehr selbst: das übernehmen ::backdrop, das native <dialog> und :root.dialog-open. Das CSS nutzt @layer – eigene Regeln außerhalb einer Ebene gewinnen damit leichter als früher.

Nichts davon muss man bei der Migration anfassen – aber einiges löst selbstgebaute Lösungen ab, die man loswerden kann.

Zu den meisten dieser Komponenten gibt es auf dieser Demo-Seite ein eigenes Beispiel.

Zum Schluss einmal durchbauen – Sass meldet die meisten Reste von selbst, weil umbenannte Variablen und Funktionen den Build abbrechen. Was der Build nicht sieht, findet eine Suche im Projekt:

• responsive Klassen in alter Schreibweise: -sm-, -md-, -lg-, -xl-, -xxl-
• die alten Komponentennamen: modal, offcanvas, dropdown – in Klassen, Attributen, Events und Importen
• Varianten in alter Form: btn-primary, alert-primary, bg-primary am Badge
• Textfarben: text-primary und Geschwister, text-muted
• window.bootstrap, popperConfig, needs-validation, was-validated
• --bs-*-rgb und rgba( in eigenem CSS

Nicht nur im HTML suchen: Fluid-Templates, TypoScript, eigene Sass-Dateien und JavaScript, das Klassen setzt, tragen genauso viele Treffer.

Im Browser nachsehen

Bootstrap 6 setzt moderne CSS-Funktionen voraus – unter anderem oklch() und color-mix(). Zum Testen also ein Browser, der beides kennt; in älteren sehen Farben falsch aus oder fehlen ganz. Wer eine Browser-Matrix bedienen muss, klärt das besser vor der Migration als danach.

Und das, was keine Suche findet: Abstände. Durch die neue Abstands-Skala wirken übernommene Klassen enger als vorher. Einmal über die wichtigen Seiten gehen und vergleichen lohnt sich.