--- layout: docs title: Migrating to v5 description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5. group: migration aliases: "/migration/" toc: true --- ## Browser support See the browser and devices page for details on what is currently supported in Bootstrap 5. Since v4, here's what's changed to our browser support: - Dropped support for Internet Explorer 10 and 11 - Dropped support for Firefox NN - MM - Dropped support for Safari NN - Dropped support for iOS Safari NN - Dropped support for Chrome NN - Dropped support for Android NN ## Sass Changes to our source Sass files and compiled CSS. - Removed `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active` mixins. Use regular CSS syntax for these moving forward. [See #28267](https://github.com/twbs/bootstrap/pull/28267). - Remove previously deprecated mixins - `float()` - `form-control-mixin()` - `nav-divider()` - `retina-img()` - `text-hide()` (also dropped the associated utility class, `.text-hide`) - `visibility()` - `form-control-focus()` - **Todo:** New variables? - **Todo:** Rearrange forms source files (under `scss/forms/`) - **Todo:** Rearrange grid source files (under `scss/grid/`) - Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339). - Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083) - The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) - `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146](https://github.com/twbs/bootstrap/pull/29146) - Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271) - The `button-variant()` mixin now accepts 3 optional color parameters, for each button state, to override the color provided by `color-contrast()`. By default, these parameters will find which color provides more contrast against the button state's background color with `color-contrast()`. - The `button-outline-variant()` mixin now accepts an additional argument, `$active-color`, for setting the button's active state text color. By default, this parameter will find which color provides more contrast against the button's active background color with `color-contrast()`. - Ditch the Sass map merges, which makes 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 on the [theming documentation]({{< docsref "/getting-started/theming#maps-and-loops" >}}). - `color-yiq()` function is renamed to `color-contrast()` since it's not related to YIQ colorspace anymore — [See #30168](https://github.com/twbs/bootstrap/pull/30168/) — and related variables are renamed alongside: - `$yiq-contrasted-threshold` is renamed `$min-contrast-ratio`, - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed `$color-contrast-dark` and `$color-contrast-light`. ## JavaScript Changes to our source and compiled JavaScript files. - Dropped jQuery dependency and rewrote plugins to be in regular JavaScript. - Removed underscore from public static methods like `_getInstance()` → `getInstance()`. ## Grid and layout Changes to any layout tools and our grid system. - Dropped `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265). - Remove `position: relative` from grid columns. - The horizontal padding is added to the direct children in a row instead of the columns themselves. - This simplifies our codebase. - The column classes can now be used stand alone. Whenever they are used outside a `.row`, horizontal padding won't be added. - Responsive gutter classes can be used to control the gutter width in as well horizontal, vertical or both directions. - The gutter width is now set in `rem` and decreased from `30px` to `1.5rem` (24px). - `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way the grid system can be used, even if `box-sizing: border-box` in not applied to each element. ## Content, Reboot, etc Changes to Reboot, typography, tables, and more. - [RFS]({{< docsref "/getting-started/rfs" >}}) enabled for automated font size rescaling. [See #29152](https://github.com/twbs/bootstrap/pull/29152) - Reset default horizontal `padding-left` on `