# Migrating to v4 > Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v3 to v4. ## Dependencies - Upgraded from Popper v1.x to Popper v2.x. - Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated. ## Browser support - Dropped Internet Explorer 10 and 11 - Dropped Microsoft Edge < 16 (Legacy Edge) - Dropped Firefox < 60 - Dropped Safari < 12 - Dropped iOS Safari < 12 - Dropped Chrome < 60

## Documentation changes - Redesigned homepage, docs layout, and footer. - Added [new Parcel guide](https://coreui.io/bootstrap/docs/getting-started/parcel/). - Added [new Customize section](https://coreui.io/bootstrap/docs/customize/overview/). - Reorganized all form documentation into [new Forms section](https://coreui.io/bootstrap/docs/forms/overview/), breaking apart the content into more focused pages. - Similarly, updated [the Layout section](https://coreui.io/bootstrap/docs/layout/breakpoints/), to flesh out grid content more clearly. - Renamed "Navs" component page to "Navs & Tabs". - Renamed "Checks" page to "Checks & radios". - Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions. - Added new keyboard shortcut for the search field: Ctrl + /. ## Sass - We've ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps](https://coreui.io/bootstrap/docs/customize/sass/#maps-and-loops). - Breaking Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ colorspace. - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`. - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`. - Breaking Removed print styles and `$enable-print-styles` variable. Print display classes are still around. - Breaking Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. - Breaking Renamed `theme-color-level()` function to `color-level()` . - Breaking Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity. - Breaking Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes. - Breaking **Removed previously deprecated mixins:** - `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active` - `float()` - `form-control-mixin()` - `nav-divider()` - `retina-img()` - `text-hide()` (also dropped the associated utility class, `.text-hide`) - `visibility()` - `form-control-focus()` - Breaking Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. - `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. - The `border-radius()` mixin now has a default value. ## Color system - The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. for more details. - Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables. - Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`. - To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately. ## Grid updates - **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints. - **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities. - Added new [gutter class](https://coreui.io/bootstrap/docs/layout/gutters/) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters. - Breaking Renamed `.no-gutters` to `.g-0` to match new gutter utilities. - Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior. - Breaking Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box. - Breaking Dropped the `.media` component as it can be easily replicated with utilities. - Breaking `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference. - `$enable-grid-classes` no longer disables the generation of container classes anymore. - Updated the `make-col` mixin to default to equal columns without a specified size. ## Content, Reboot, etc - **[RFS](https://coreui.io/bootstrap/docs/getting-started/rfs/) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._ - Breaking Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s. - Added two new `.display-*` heading sizes, `.display-5` and `.display-6`. - **Links are underlined by default** (not just on hover), unless they're part of specific components. - **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling. - Breaking Nested tables do not inherit styles anymore. - Breaking `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`). - Breaking The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables. - Split table cell padding variables into `-y` and `-x`. - Breaking Dropped `.pre-scrollable` class. - Breaking `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. - Breaking Dropped `.text-justify` class. - Breaking `

` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `

`). - Reset default horizontal `padding-left` on `

Breaking

`. _The docs for this has moved from our Buttons page to the new Forms section._ - Breaking **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.](https://coreui.io/bootstrap/docs/components/buttons/#block-buttons) - Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters. - Updated buttons to ensure increased contrast on hover and active states. - Disabled buttons now have `pointer-events: none;`. ### Card - Breaking Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment). - Breaking Dropped `.card-columns` in favor of Masonry. - Breaking Replaced the `.card` based accordion with a [new Accordion component](https://coreui.io/bootstrap/docs/components/accordion/). ### Carousel - Added new [`.carousel-dark` variant](https://coreui.io/bootstrap/docs/components/carousel/#dark-variant) for dark text, controls, and indicators (great for lighter backgrounds). - Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons](https://coreui.io/icons/). ### Close button - Breaking Renamed `.close` to `.btn-close` for a less generic name. - Close buttons now use a `background-image` (embedded SVG) instead of a `×` in the HTML, allowing for easier customization without the need to touch your markup. - Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds. ### Collapse - Removed scroll anchoring for accordions. ### Dropdowns - Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns. - Added new variable for `$dropdown-padding-x`. - Darkened the dropdown divider for improved contrast. - Breaking All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. - Dropdown menus now have a `data-coreui-popper="static"` attribute set when the positioning of the dropdown is static and `data-coreui-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning. - Breaking Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. - Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior](https://coreui.io/bootstrap/docs/components/dropdowns/#auto-close-behavior). You can use this option to accept the click inside or outside the dropdown menu to make it interactive. - Dropdowns now support `.dropdown-item`s wrapped in `

`s. ### Footer - Breaking Renamed `.c-footer` to `.footer`. ### Header - Breaking Renamed `.c-header` to `.header`. - Breaking Renamed `.c-header-brand` to `.header-brand`. - Breaking Renamed `.c-header-nav` to `.header-nav`. - Breaking Renamed `.c-header-toggler` to `.header-toggler`. - Breaking Renamed `.c-header-text` to `.header-text`. - Breaking Dropped the `.c-header-nav-item` — use the `.nav-item` instead. - Breaking Dropped the `.c-header-nav-link` — use the `.nav-link` instead. ### Jumbotron - Breaking Dropped the jumbotron component as it can be replicated with utilities. ### List group - Added new [`.list-group-numbered` modifier](https://coreui.io/bootstrap/docs/components/list-group/#numbered) to list groups. ### Navs and tabs - Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class. ### Navbars - Breaking Navbars now require a container within (to drastically simplify spacing requirements and CSS required). ### Offcanvas - Added the new [offcanvas component](https://coreui.io/bootstrap/docs/components/offcanvas/). ### Pagination - Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another. - Added `transition`s to pagination links. ### Popovers - Breaking Renamed `.arrow` to `.popover-arrow` in our default popover template. - Renamed `whiteList` option to `allowList`. ### Sidebar - Breaking Renamed `.c-sidebar` to `.sidebar`. - Breaking Renamed `.c-sidebar-brand` to `.sidebar-brand`. - Breaking Renamed `.c-sidebar-footer` to `.sidebar-footer`. - Breaking Renamed `.c-sidebar-header` to `.sidebar-header`. - Breaking Renamed `.c-sidebar-nav` to `.sidebar-nav`. - Breaking Renamed `.c-sidebar-toggler` to `.sidebar-toggler`. - Breaking Dropped the `.c-sidebar-nav-item` — use the `.nav-item` instead. - Breaking Dropped the `.c-sidebar-nav-link` — use the `.nav-link` instead. ### Spinners - Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. - Improved spinner vertical alignment. ### Toasts - Toasts can now be [positioned](https://coreui.io/bootstrap/docs/components/toasts/#placement) in a `.toast-container` with the help of [positioning utilities](https://coreui.io/bootstrap/docs/utilities/position/). - Changed default toast duration to 5 seconds. - Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions. ### Tooltips - Breaking Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template. - Breaking The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements. - Breaking Renamed `whiteList` option to `allowList`. ## Utilities - Breaking Renamed several utilities to use logical property names instead of directional names with the addition of RTL support: - Renamed `.left-*` and `.right-*` to `.start-*` and `.end-*`. - Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`. - Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`. - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`. - Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`. - Renamed `.mfs-*` and `.mfe-*` to `.ms-*` and `.me-*`. - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`. - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`. - Breaking Disabled negative margins by default. - Added new `.bg-body` class for quickly setting the ``'s background to additional elements. - Added new [position utilities](https://coreui.io/bootstrap/docs/utilities/position/#arrange-elements) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property. - Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements. - Added new [`border-width` utilities](https://coreui.io/bootstrap/docs/utilities/borders/#border-width). - Breaking Renamed `.text-monospace` to `.font-monospace`. - Breaking Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore. - Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map. - Breaking Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency. - Breaking Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency. - Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts. - Breaking Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. - Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here](https://coreui.io/bootstrap/docs/utilities/text/#line-height). - Moved the `.d-none` utility in our CSS to give it more weight over other display utilities. - Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`. ## Helpers - Breaking **Responsive embed helpers have been renamed to [ratio helpers](https://coreui.io/bootstrap/docs/helpers/ratio/)** with new class names and improved behaviors, as well as a helpful CSS variable. - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`. - We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element. - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair. - CSS variables are now generated and included for each value in the Sass map. Modify the `--cui-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio](https://coreui.io/bootstrap/docs/helpers/ratio/#custom-ratios). - Breaking **"Screen reader" classes are now ["visually hidden" classes](https://coreui.io/bootstrap/docs/helpers/visually-hidden/).** - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss` - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable` - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`. - `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore. ## JavaScript - Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-coreui-toggle` instead of `data-toggle`. - **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin: ```js const modal = new coreui.Modal('#myModal') const dropdown = new coreui.Dropdown('[data-coreui-toggle="dropdown"]') ``` - `popperConfig` can be passed as a function that accepts the CoreUI for Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. **Applies to dropdowns, popovers, and tooltips.** - The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.** - Removed underscore from public static methods like `_getInstance()` → `getInstance()`.