npm / bootstrap
bootstrap
What changed in bootstrap 6, from its official release notes, upgrade guides and advisories. Also covers @types/bootstrap. Sources checked 2026-10-19.
131 breaking64 new APIs and options27 behavior and defaults4 tooling
See which of these apply to your code, ranked, in your agent:
npx @unstale/cli initbootstrap 6226 changes
Breaking changes 131
xxlis renamed to2xl; its breakpoint increases to 1536px and its container to 1440px.Native form controls now use the primary theme color globally.
Accordion markup is rebuilt on native details and summary, removing the basic open/close JavaScript dependency and the accordion-button and accordion-collapse classes.
The Sass
add()function was removed; usecalc()instead.Alerts animate out without .fade or .show; close() adds .hiding during the transition, delaying closed.bs.alert. Use .alert-instant for immediate removal.
Dismissible alerts no longer use .alert-dismissible; place .btn-close directly inside the alert.
Use a .theme-* class for badge color instead of .bg-*; .badge-subtle and .badge-outline provide alternative variants.
.bg-light, .bg-dark, and .bg-body-secondary/.bg-body-tertiary surfaces were removed or replaced by the adaptive .bg-1 and .bg-2 scale.
Background opacity utilities were renamed to .bg-{n} for the 10–100 opacity scale.
The base body font size is now set directly with --body-font-size; replace references to the removed base font-size variables.
The Sass module was split into content/lists and content/blockquote; update individual imports to the new module paths.
The separate ESM bundle was removed;
bootstrap.jsis now the ESM entry point.Bootstrap JavaScript is ESM-only;
bootstrap.jsis now a native ES module and the former UMD loading model and global are gone.All border-radius Sass variables were removed in favor of the numeric
$radiimap and--radius-*tokens.Breadcrumbs use interactive .breadcrumb-link elements and explicit .breadcrumb-divider separators instead of the divider content string; the default bottom margin is removed.
Renamed to
breakpoint-prefix(); the function now returns a prefix string rather than an infix.Toggle buttons now put .btn-check on a label containing the input, eliminating id/for attributes and using :has() instead of sibling selectors.
Close-button icons use a CSS mask tinted by currentcolor, need no child SVG, and inherit dark-surface contrast; .btn-close-white is removed.
Per-color button classes are replaced by a button variant class composed with a .theme-* class; new variants include solid, outline, subtle, text, styled, and link.
Cards put the outer border on .card, use list-group-flush instead of .card-list, and add spacing, shadow, translucent, subtle, and row variants; .card-link is removed.
Card groups use container queries rather than viewport media queries; add a query container around the group for the attached equal-width row layout.
User interaction with an autoplaying carousel permanently stops autoplay rather than letting it resume.
The carousel-caption class and its tokens are removed; compose and position slide content with custom markup and utilities.
The carousel-control-prev and carousel-control-next button classes are removed; compose controls from buttons, slide data attributes, and icon classes.
The dark carousel class and its Sass variables were removed; use
data-bs-theme="dark"instead.The .carousel-dark class is removed; use data-bs-theme="dark" on the carousel for reversed contrast.
Control icon classes are renamed to .carousel-icon-prev and .carousel-icon-next, with currentcolor icons sized using --bs-carousel-control-icon-width.
The ride option and ride data attributes are replaced by boolean autoplay; autoplay is opt-in and initializes through data-bs-autoplay="true".
Stacked carousel layout is now the default and .carousel-stacked is removed; controls and indicators flow above or below slides unless overlaid.
The touch option is removed because horizontal touch dragging is native scrolling on the scroll-snap container.
The wrap option is replaced by ends, with loop, wrap, and stop values; loop is the default.
Checkboxes now receive .check directly on the input without a wrapper, and their marks use a CSS mask on a ::before pseudo-element.
Collapse now animates size with CSS interpolate-size, toggling only .show; .collapsing and plugin-written inline height and width are removed.
Collapse triggers use aria-expanded as their state signal; Bootstrap no longer adds or removes .collapsed.
The toggle option is removed; construction preserves markup-declared state, so call show() to open a closed element during initialization.
Projects using CommonJS calls must switch to ESM
importsyntax.The unused Sass mixin was removed.
The css-var, css-variable-name, and local-vars utility API options were removed; use the property map approach and variables option instead.
The clearfix helper was dropped in favor of the .d-flow-root utility.
Use data-bs-dismiss="dialog" instead of data-bs-dismiss="modal" to dismiss a dialog.
Controls Menu direction, replacing directional wrapper classes such as
.dropup.Use data-bs-toggle="dialog" instead of data-bs-toggle="modal" to open a dialog.
Replaces
data-bs-toggle="dropdown"to activate Menu.Use the HTML name attribute on details elements to create exclusive accordion groups instead of data-bs-parent.
Replaces Modal with a native-dialog-based component; markup, classes, data attributes, events, CSS variables, JavaScript API, and backdrop behavior all change.
Dialog scroll prevention now marks the root html element with .dialog-open instead of adding .modal-open to body.
Dialog replaces Modal and is built on the native <dialog> element; developers should follow the migration guidance.
Display heading utilities .display-1 through .display-6 were removed with no single-class replacement; combine large font-size and weight utilities.
Replaces Offcanvas with Drawer, which uses a native dialog element; class names, data attributes, events, CSS variables, JavaScript APIs, and the Sass z-index variable are renamed.
Dropdown was replaced by Menu; update component imports, data attributes, classes, events, and data keys to their Menu equivalents.
The ineffective caret flag and caret mixins and variables were removed; add an icon to toggle markup if a caret is needed.
The Sass flag was removed because dark mode is always compiled; control it at runtime with
data-bs-themeorcolor-mode().The validation-icons Sass flag was removed.
The Sass option and built-in validation background icons on form controls were removed.
Floating UI replaces Popper.js for menu, tooltip, and popover positioning.
Renames the
popperConfigoption on Tooltip, Popover, and Menu; update custom positioning configuration.A shared mixin replaces component-specific focus-box-shadow Sass variables; customize focus styles by overriding the focus-ring CSS custom properties.
Individual font-weight Sass variables were replaced by a single map; customize body weight with --body-font-weight.
A grid-based layout component was added for labels, controls, help text, and validation feedback, replacing checkgroup and radiogroup wrappers.
Form labels now default to font-weight 500 and inherit font size.
Range is now a JavaScript component: .form-range is the wrapper, the input uses .form-range-input, and each wrapper is initialized automatically.
The .form-select class was removed; use .form-control on select elements.
Helper text now uses --fg-2 for color, and its margin-top spacing is handled by the parent .form-field grid gap.
The mixin signature changed from ($state, $color, $icon, ...) to ($state, $theme).
The numeric .fs-1 through .fs-6 scale was replaced with ascending t-shirt size keys from .fs-xs through .fs-6xl.
Renamed to
$breakpoints.The class was removed because border-radius logic no longer branches on it.
The Sass typography variables were removed; customize their equivalent CSS variables at runtime instead.
Reboot sets light and dark color schemes on every iframe; use .color-scheme-light on an embed that does not support dark mode.
Bootstrap JavaScript no longer supports jQuery.
The UMD entry point was removed.
The .lead utility was removed with no exact one-class replacement.
The
lgbreakpoint increases from 992px to 1024px; its container remains 960px.The line-height utility was renamed to .lh-md, and its CSS variable was renamed to --line-height-md.
The link utility family was replaced by underline utilities; link opacity utilities have no dedicated replacement.
The helper is no longer needed in v6.
Horizontal list-group variants use container queries rather than viewport media queries and require a parent query container to respond.
The mixin now exposes
$prefixinstead of$infix.The mixin now exposes
$prefixinstead of$infix.The Sass maps file was removed as part of the new color-mode and theming structure.
Menu replaces Dropdown and uses the
menudata attribute, Menu classes, events, and JavaScript export.Replaces
.dropdown-itemin Menu markup.Replaces
.dropdown-menu; Menu markup uses a flat structure and no wrapper element is required.The long-deprecated ScrollSpy option is no longer parsed.
Maximum-height and maximum-width utilities were renamed to .max-h-* and .max-w-*; minimum-size utilities were added.
Bootstrap 6 raises minimum support to Chrome and Edge 130, Firefox 132, and Safari 18 on macOS and iOS, with no fallbacks, prefixes, or polyfills below that floor.
Negative spacing utilities were reduced to -1 and -2 margins on inline start and end; the full negative margin family was removed.
Responsive navbar collapsing now uses Drawer instead of Collapse, with a breakpoint-prefixed .navbar-expand class; navbar-light and navbar-dark are removed.
Navbar height is no longer computed from link typography; a 3.5rem minimum and brand padding token set sizing, configurable with navbar padding or minimum-height tokens.
Bootstrap no longer supports Node Sass.
The long-deprecated ScrollSpy option is no longer parsed.
Sass color variables now use
oklch()and tint/shade scales usecolor-mix(in oklch, ...)by default; this requires browser support for both functions.The Sass file was renamed to
_placeholder.scss; update individual@useimports.Transition mixins now emit transitions only when this media query matches; browsers without support for the feature get no transition.
The Sass variable was removed; CSS custom-property prefixing is now handled by PostCSS, so customize the prefix in PostCSS configuration.
Responsive and state classes use a prefix followed by a colon, replacing infix or suffix forms across utilities, grid, pseudo-state variants, and responsive components.
Named border-radius tokens were replaced by a numeric 0–9 map that generates --radius-* tokens and --radius-pill.
Radios now receive .radio directly on the input without a wrapper, and their marks use a CSS mask on a ::before pseudo-element.
RFS and its mixins were removed; typography now uses fixed
remvalues andclamp()for responsive sizing.The v5 RGB CSS custom properties and
rgba()patterns were removed.Rounded utilities now span .rounded-0 through .rounded-9 and map to changed radius values; shift class numbers to preserve v5 roundness.
The form variables file was removed; validation styling now uses theme-derived CSS custom properties.
Renamed to
scss/mixins/_form-validation.scss, which contains only theform-validation-state-selectormixin.The mixin file was renamed to scss/mixins/_form-validation.scss, and validation state styling now lives in scss/forms/_validation.scss.
The event now fires after the CSS transition finishes, rather than synchronously when
show()is called.The event fires when the new slide settles into view; a multi-slide to() jump may emit intermediate slid events.
The Sass file was renamed to
_spinner.scss; update individual@useimports.Pseudo-state utility variants now use prefix syntax such as hover:opacity-50 instead of suffix syntax.
The Sass
subtract()function was removed; usecalc()instead.The constructor now throws if the tab element has no tab-panel ancestor, rather than returning an inert instance.
Tab panes animate in with active and show applied in the same frame; the outgoing pane hides immediately, and shown.bs.tab waits for the incoming transition.
Text color utilities were replaced by .fg-* utilities; new emphasis and contrast variants were added, and several color utility names changed.
The themed background and contrasting foreground helpers were removed; compose the result from background and contrast foreground utilities.
Composable theme classes replace per-component color variants and set semantic CSS custom properties consumed by components.
ScrollSpy's default threshold changes from
[0.1, 0.5, 1]to[0].Toast transitions are CSS-driven; the animation option and data-bs-animation are removed, and .toast-instant disables animation.
isShown() returns false as soon as hide() is called rather than after the fade-out completes.
Combined transition tokens were removed; components now expose separate property, duration, and timing tokens.
Replaces the duration portion of v5's
$transition-fadevalue, allowing duration to be tuned independently.Replaces the timing portion of v5's
$transition-fadevalue, allowing easing to be tuned independently.The internal backdrop helper was removed; direct imports from
bootstrap/js/src/util/no longer work.The internal focus-trap helper was removed; direct imports from
bootstrap/js/src/util/no longer work.The internal scrollbar helper was removed; direct imports from
bootstrap/js/src/util/no longer work.Replaces
$form-validation-stateswith a state-name-to-theme-key map.The validation Sass map replaces $form-validation-states with a simpler mapping from state names to theme keys.
The dark-mode variables file was removed as part of the new color-mode and theming structure.
Variables were consolidated into
_config.scss, replacing the former variables file.Client-side validation no longer uses .was-validated or bare :valid and :invalid pseudo-classes.
The UMD-created global namespace is no longer available; use explicit ESM imports for plugin APIs.
The
xlbreakpoint increases from 1200px to 1280px and its container from 1140px to 1200px.Renamed to
$zindex-menu.
New APIs and options 64
Adds compact accordion styling and spaced, separate rounded-card layouts.
Disables a component's keyframe animation on a single element.
Adds a decorative pop animation helper that disables itself under
prefers-reduced-motion.Adds a decorative shake animation helper that disables itself under
prefers-reduced-motion.Adds avatars with size classes, status indicators, a subtle variant, and grouped avatars.
A hairline border utility was added, backed by a .5px border-width token.
The accordion panel now has its own transition token trio, replacing a hard-coded
.2sduration.Lets developers add a property to dialog animation without rewriting the whole transition declaration.
Lets developers add a property to drawer animation without rewriting the whole transition declaration.
Lets developers add a property to menu animation without rewriting the whole transition declaration.
The range plugin exposes the fill amount as a CSS variable from 0 to 1 and keeps it in sync.
Lets developers add a property to toast animation without rewriting the whole transition declaration.
Buttons and inputs share --btn-input-* sizing tokens; buttons also gain square icon-only and xs size classes.
Adds an accessible control to pause or resume autoplay, or start autoplay on a static carousel.
Adds a chip component for tags and tokens, plus interactive chip entry with the Chips JavaScript plugin and lifecycle events.
Collapse lifecycle events follow the CSS transition, configurable with the collapse transition property, duration, and timing tokens.
Configure the color space used for generated tint and shade scales.
Color-scheme utilities set the color-scheme property on one element, useful when an element needs a different scheme from the page.
A new Sass file holds colors separately.
A new searchable select component built on Menu, with single- and multi-select support.
A searchable, filterable select component was added with single- and multi-select modes, built on the Menu component.
Container query utilities were added for inline-size and size containers.
A shared token controls the duration of checkbox, radio, and switch mark animations.
A shared token controls the timing of checkbox, radio, and switch mark animations.
CSS layers are defined in
_root.scssand applied across Bootstrap Sass files.Range components can optionally show a value bubble using this data attribute.
Client-side validation opts in through data-bs-validate and uses :user-invalid after interaction; the value valid also enables success styling.
Adds a datepicker plugin built on Vanilla Calendar Pro; popups close after selection, outside interaction, Escape, or focus moving outside, and emit lifecycle events.
Set modal: false or data-bs-modal="false" to use a non-modal dialog.
Adds slide, instant, static-backdrop, non-modal, and scrollable dialog variants.
Dialog and Drawer share a base class for show/hide/toggle lifecycle, keyboard handling, backdrop clicks, and static-backdrop bounce.
Display utilities gained flow-root and contents options.
Adds a flush-to-edge drawer variant without inset, border radius, or shadow.
Dynamic viewport utilities were added for full viewport height and width, including min-size variants.
Adds a component for decorating form inputs with icons or text.
A medium font-weight utility was added with value 500.
A semibold font-weight utility was added with value 600.
Grid utilities were added for column templates, spanning all columns, adopting parent subgrid tracks, and grid auto flow.
Adds a reduced-motion-aware helper that raises elements with a transform and deeper shadow on hover and keyboard focus.
This class marks elements that should be skipped by input-group adjoining border-radius rules.
A root CSS token was added for runtime customization of the link underline offset.
Adds a plugin that collapses overflowing nav items into a menu, measures and observes its wrapper, and fires update and overflow events there.
Adds an accessible one-time-password input rendered as separate digit slots from a single input, with plugin events exposing
event.value.An
exportsmap provides explicit subpath access to source, dist, and Sass files.Add a .theme-{color} class to pagination to theme its links, hover, focus, and active page item.
A place-items utility was added.
Adds a class for scoping rich typography and
.not-proseto opt out of prose styles inside a prose container.Adds a plugin that styles
.form-rangeas a slider with a filled track, optional value bubble, datalist tick marks, and a change event.Shadow utilities gained xs and xl sizes, layered multi-stop shadows, theme colors, and opacity controls.
A fixed rem-based size map with keys 1–12 was added and merged into the width utility.
A migration skill guides coding agents through the v5-to-v6 upgrade phase by phase.
A CSS-only component for multi-step workflows, with
.stepper-itemand the.stepper-horizontalvariant.Adds a JavaScript plugin for password strength metering with a strength-change event.
Adds nested menu support through
.submenu, withsubmenuTriggerchoices ofhover,click, orboth, and asubmenuDelayoption.A new switch token controls the indicator width as switch internals move away from padding-based animation.
The text-wrap utility gained a balance value.
New text-size utilities set font-size and line-height together.
Use
.theme-reseton a nested subtree to return to component defaults.A new Sass file sets up global theming for color application.
Adds a plugin for toggling element classes or attributes through
data-bs-toggle="toggler", with toggle lifecycle events.Sets the ScrollSpy activation line as a percentage or pixel value from the top of the scroll root; its default is
12%.Disables a component's transition on a single element.
A shared easing token is available for dialog, drawer, and menu overlays.
Added as a peer dependency for the Datepicker component.
Behavior and default changes 27
The bundled JavaScript includes Floating UI and Vanilla Calendar Pro; standalone JavaScript leaves these peer dependencies external.
The carousel uses native horizontal scroll snap for sliding, touch dragging, momentum, and keyboard scrolling while preserving its markup, JavaScript methods, and events.
For the listed components,
close()now returns a promise that resolves when the transition ends, including when the call does nothing.A trigger targeting several collapses within one data-bs-parent opens them together; the parent closes only collapses the trigger does not target.
Drawer dismiss triggers can resolve breakpoint-prefixed drawers without data-bs-target; existing targets continue to work.
On DOMContentLoaded, Bootstrap adds aria-pressed to toggle buttons that lack it, deriving the value from .active; markup can set it earlier.
Theme and config maps now merge partial
@use ... with ()overrides; set a key tonullto remove it.A trigger in an open dialog can open another dialog and automatically close the current one.
Drawers detect their placement and dismiss in the appropriate swipe direction on touch devices.
Adornment wrappers should be label elements so clicks on the wrapper focus the field; hide adornment text from the accessible name with aria-hidden.
Form controls now always have a min-height and apply the focus ring on :focus-within as well as :focus-visible.
Heading, paragraph, description-list, and legend typography now uses CSS variables instead of Sass variables, enabling runtime customization.
For the listed components,
hide()now returns a promise that resolves when the transition ends, including when the call does nothing.List inline-start padding is now driven by a spacer-scale CSS token rather than a hardcoded rem value.
The toggler icon uses a CSS mask tinted with currentcolor instead of an embedded SVG background image.
The standard placeholder loading animation is now shimmer; the old opacity animation is available as .placeholder-pulse, with .placeholder-glow retained as an alias.
Root tokens are emitted on both selectors so shadow roots adopting Bootstrap stylesheets can read them; overrides limited to
:rootare not visible to Web Components.Now defaults to
nulland acts as an advanced observer override that takes precedence overtopMargin.ScrollSpy now uses deterministic IntersectionObserver activation-line detection instead of scroll-position polling.
For the listed components,
show()now returns a promise that resolves when the transition ends, including when the call does nothing.When enabled, clicking a link restores the URL hash and moves focus to the target section after scrolling settles.
The spacer map expanded from keys 0–5 to 0–12, with finer increments and changed values for several existing keys.
Spacing and border utilities retain their class names but now use CSS logical properties for RTL and writing-mode support.
Switches now use a wrapper around the input, with the thumb absolutely positioned and animated using inset-inline-start.
For the listed components,
toggle()now returns a promise that resolves when the transition ends, including when the call does nothing.Tooltips and popovers animate with CSS rather than .fade; animation: false uses an instant variant, and tips remain open while hovered or focused.
Component JavaScript reads computed transition duration; zero-duration transitions resolve immediately and fire their event without waiting.
Tooling 4
Bootstrap's JavaScript source now uses TypeScript
.tsfiles; built-in declarations ship injs/dist/*.d.ts, and deep.jsimports resolve to compiled files.CSS custom properties are prefixed automatically via this PostCSS tool during the build.
Bootstrap's source build now uses Rolldown instead of Rollup and Babel; this matters only when building Bootstrap from source.
The separate types package is no longer needed because Bootstrap ships built-in type declarations.