Migrating to v5

Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v4 to v5.

🤖 Looking for the LLM-optimized version?View llm.md

v5.0.0

CSS variables

• Restores CSS variables for breakpoints, though we don’t use them in our media queries as they’re not supported. However, these can be useful in JS-specific contexts.

• Per the color modes update, we’ve added new utilities for new Sass CSS variablessecondary andtertiary text and background colors, plus{color}-bg-subtle,{color}-border-subtle, and{color}-text-emphasis for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.

• Adds additional variables for alerts,.btn-close, and.offcanvas.

• The--cui-heading-color variable is back with an update and dark mode support. First, we now check for anull value on the associated Sass variable,$headings-color, before trying to output the CSS variable, so by default it’s not present in our compiled CSS. Second, we use the CSS variable with a fallback value,inherit, allowing the original behavior to persist, but also allowing for overrides.

• Converts links to use CSS variables for stylingcolor, but nottext-decoration. Colors are now set with--cui-link-color-rgb and--cui-link-opacity asrgba() color, allowing you to customize the translucency with ease. Thea:hover pseudo-class now overrides--cui-link-color-rgb instead of explicitly setting thecolor property.

• --cui-border-width is now being used in more components for greater control over default global styling.

• Adds new root CSS variables for ourbox-shadows, including--cui-box-shadow,--cui-box-shadow-sm,--cui-box-shadow-lg, and--cui-box-shadow-inset.

• Removed several duplicate and unused root CSS variables.

Color modes

Learn more by reading the newcolor modes documentation.

• Global support for light (default) and dark color modes. Set color mode globally on the:root element, on groups of elements and components with a wrapper class, or directly on components, withdata-coreui-theme="light|dark". Also included is a newcolor-mode() mixin that can output a ruleset with thedata-coreui-theme selector or a media query, depending on your preference.

  Deprecated Color modes replace dark variants for components, so.btn-close-white,.carousel-dark,.dropdown-menu-dark, and.navbar-dark are deprecated.

• New extended color system. We’ve added new theme colors (but not in$theme-colors) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors forcolor andbackground-color. These new colors are available as Sass variables, CSS variables, and utilities.

• We’ve also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities.

• Adds new_variables-dark.scss stylesheet to house dark-mode specific overrides. This stylesheet should be imported immediately after the existing_variables.scss file in your import stack.

   // Configuration @import "functions"; @import "variables";+@import "variables-dark"; @import "maps"; @import "mixins"; @import "utilities";

• Dark mode colors are now derived from our theme colors (e.g.,$primary) in Sass, rather than color specific tints or shades (e.g.,$blue-300). This allows for a more automated dark mode when customizing the default theme colors.

• Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.

• Addedcolor-scheme: dark to dark mode CSS to change OS level controls like scrollbars

• Form validationborder-color and textcolor states now respond to dark mode, thanks to new Sass and CSS variables.

• Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly.

• Ourbox-shadows will once again always stay dark instead of inverting to white when in dark mode.

• Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.

• Improved docs code syntax colors and more across light and dark modes.

Typography

• We no longer set a color for$headings-color-dark or--cui-heading-color for dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable tonull and added anull check like we use on the default light mode.

Components

Alert

• Alert variants are now styled via CSS variables.

• Deprecated The.alert-variant() mixin is now deprecated. We nowuse a Sass loop directly to modify the component’s default CSS variables for each variant.

Card

• Cards now have acolor set on them to improve rendering across color modes.

Close button

• Deprecated The.btn-close-white class has been deprecated and replaced withdata-coreui-theme="dark" on the close button or any parent element.See the docs for an example.

Date Picker

• Breaking Removed optionformat, useinputDateFormat instead of.See the docs for an example.
• BreakingdateChange.coreui.date-picker event return only the date object, instead of the date object and formatted string.

Date Range Picker

• Breaking Removed optionformat, useinputDateFormat instead of.See the docs for an example.
• BreakingstartDateChange.coreui.date-range-picker andendDateChange.coreui.date-range-picker events return only the date object, instead of the date object and formatted string.

Dropdowns

• Deprecated The.dropdown-menu-dark class has been deprecated and replaced withdata-coreui-theme="dark" on the dropdown or any parent element.See the docs for an example.

List group

• List group item variants are now styled via CSS variables.

• Deprecated The.list-group-variant() mixin is now deprecated. We nowuse a Sass loop directly to modify the component’s default CSS variables for each variant.

Navbar

• Deprecated The.navbar-dark class has been deprecated and replaced withdata-coreui-theme="dark" on the navbar or any parent element.See the docs for updated examples.

Navs

• Added new.nav-underline variant for our navigation with a simpler bottom border under the active nav link.See the docs for an example.

• Navs now have new:focus-visible styles that better match our custom button focus styles.

Progress bars

The markup forprogress bars has been updated in v5.0.0. Due to the placement ofrole and variousaria- attributes on the inner.progress-bar element,some screen readers were not announcing zero value progress bars. Now,role="progressbar" and the relevantaria-* attributes are on the outer.progress element, leaving the.progress-bar purely for the visual presentation of the bar and optional label.

While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before.

<!-- Previous markup --><divclass="progress"><divclass="progress-bar"role="progressbar"aria-label="Basic example"style="width: 25%"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"></div></div><!-- New markup --><divclass="progress"role="progressbar"aria-label="Basic example"aria-valuenow="25"aria-valuemin="0"aria-valuemax="100"><divclass="progress-bar"style="width: 25%"></div></div>

We’ve also introduced a new.progress-stacked class to more logically wrapmultiple progress bars into a single stacked progress bar.

<!-- Previous markup --><divclass="progress"><divclass="progress-bar"role="progressbar"aria-label="Segment one"style="width: 15%"aria-valuenow="15"aria-valuemin="0"aria-valuemax="100"></div><divclass="progress-bar bg-success"role="progressbar"aria-label="Segment two"style="width: 30%"aria-valuenow="30"aria-valuemin="0"aria-valuemax="100"></div><divclass="progress-bar bg-info"role="progressbar"aria-label="Segment three"style="width: 20%"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"></div></div><!-- New markup --><divclass="progress-stacked"><divclass="progress"role="progressbar"aria-label="Segment one"aria-valuenow="15"aria-valuemin="0"aria-valuemax="100"style="width: 15%"><divclass="progress-bar"></div></div><divclass="progress"role="progressbar"aria-label="Segment two"aria-valuenow="30"aria-valuemin="0"aria-valuemax="100"style="width: 30%"><divclass="progress-bar bg-success"></div></div><divclass="progress"role="progressbar"aria-label="Segment three"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width: 20%"><divclass="progress-bar bg-info"></div></div></div>

Subheader

Subheader component has been removed.

Sidebar

• Breaking Sidebar has a light color scheme by default, use.sidebar-dark to make it dark.

Forms

• .form-control is now styled with CSS variables to support color modes. This includes the addition of two new root CSS variables for the default and disabled form control backgrounds.

• .form-check and.form-switch components are now built with CSS variables for setting thebackground-image. The usage here differs from other components in that the various focus, active, etc states for each component aren’t set on the base class. Instead, the states override one variable (e.g.,--cui-form-switch-bg).

• Floating form labels now have abackground-color to fix support for<textarea> elements. Additional changes have been made to also support disabled states and more.

• Fixed display of date and time inputs in WebKit based browsers.

Helpers

• Added new.icon-link helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too.

• Added new focus ring helper for removing the defaultoutline and setting a custombox-shadow focus ring.

• Colored links once again have!important so they work better with our newly added link utilities.

Utilities

• Deprecated.text-muted will be replaced by.text-body-secondary in v6.

  With the addition of the expanded theme colors and variables, the.text-muted variables and utility have been deprecated with v5.0.0. Its default value has also been reassigned to the new--cui-secondary-color CSS variable to better support color modes. It will be removed in v6.0.0.

• Adds new.overflow-x,.overflow-y, and several.object-fit-* utilities.The object-fit property is used to specify how an<img> or<video> should be resized to fit its container, giving us a responsive alternative to usingbackground-image for a resizable fill/fit image.

• Adds new.fw-medium utility.

• Added new.z-* utilities forz-index.

• Box shadow utilities (and Sass variables) have been updated for dark mode. They now use--cui-body-color-rgb to generate thergba() color values, allowing them to easily adapt to color modes based on the specified foreground color.

• Renamed Sass and CSS variables${color}-text to${color}-text-emphasis to match their associated utilities.

• Added new.link-body-emphasis helper alongside ourcolored links. This creates a colored link using our color mode responsive emphasis color.

• Added new link utilities for link color opacity, underline offset, underline color, and underline opacity.Explore the new links utilities.

• CSS variable basedborder-width utilities have been reverted to set their property directly (as was done prior to v5.2.0). This avoids inheritance issues across nested elements, including tables.

• Added new.border-black utility to match our.text-black and.bg-black utilities.

• Deprecated Deprecated the.text-muted utility and$text-muted Sass variable. It’s been replaced by.text-body-secondary and$body-secondary-color.

• Deprecated Deprecated the.text-high-emphasis utility and$high-emphasis Sass variable.

• Deprecated Deprecated the.text-medium-emphasis utility and$medium-emphasis Sass variable.

• Deprecated Deprecated the.text-disabled utility and$disabled Sass variable.

• Deprecated Deprecated the.text-high-emphasis-inverse utility and$high-emphasis-inverse Sass variable.

• Deprecated Deprecated the.text-medium-emphasis-inverse utility and$medium-emphasis-inverse Sass variable.

• Deprecated Deprecated the.text-disabled-inverse utility and$disabled-inverse Sass variable.

• Added new.d-inline-griddisplay utility.