2014-12-17 12:31:36 +08:00
---
2015-08-15 13:45:55 +08:00
layout: docs
2019-05-04 01:52:58 +08:00
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.
2015-08-06 08:47:45 +08:00
group: migration
2019-01-09 00:33:28 +08:00
aliases: "/migration/"
2017-05-30 03:01:04 +08:00
toc: true
2014-12-17 12:31:36 +08:00
---
2019-05-04 01:52:58 +08:00
## Browser support
2018-01-18 09:29:28 +08:00
2019-05-04 01:52:58 +08:00
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:
2018-01-18 09:29:28 +08:00
2019-05-04 01:52:58 +08:00
- Dropped support for Internet Explorer NN
- 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
2018-01-18 09:29:28 +08:00
2019-05-04 01:52:58 +08:00
## Sass
2018-01-18 09:29:28 +08:00
2019-05-04 01:52:58 +08:00
Changes to our source Sass files and compiled CSS.
2018-01-18 09:29:28 +08:00
2018-09-18 07:10:07 +08:00
- 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 ).
2019-08-21 16:33:26 +08:00
- Remove previously deprecated mixins
2019-05-04 01:52:58 +08:00
- `float()`
- `form-control-mixin()`
2019-08-21 16:33:26 +08:00
- `nav-divider()`
2019-05-04 01:52:58 +08:00
- `retina-img()`
- `text-hide()` (also dropped the associated utility class, `.text-hide` )
- `visibility()`
- **Todo:** New variables?
- **Todo:** Rearrange forms source files (under `scss/forms/` )
- **Todo:** Rearrange grid source files (under `scss/grid/` )
2019-05-09 13:57:59 +08:00
- Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339 ](https://github.com/twbs/bootstrap/pull/28339 ).
2019-07-25 15:41:13 +08:00
- 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 )
2017-10-23 03:22:22 +08:00
2019-05-04 01:52:58 +08:00
## JavaScript
2017-10-23 03:22:22 +08:00
2019-05-04 01:52:58 +08:00
Changes to our source and compiled JavaScript files.
2017-12-23 08:13:01 +08:00
2019-05-04 01:52:58 +08:00
- Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
2019-07-29 17:17:42 +08:00
- Removed underscore from public static methods like `_getInstance()` → `getInstance()` .
2017-12-23 08:13:01 +08:00
2019-05-04 01:52:58 +08:00
## Grid and layout
2017-12-23 08:13:01 +08:00
2019-05-04 01:52:58 +08:00
Changes to any layout tools and our grid system.
2017-12-23 08:13:01 +08:00
2019-05-09 02:45:24 +08:00
- Dropped `.media` component as it can be built with utility classes. [See #28265 ](https://github.com/twbs/bootstrap/pull/28265 ).
2019-05-04 01:52:58 +08:00
- **Todo:** Remove `position: relative` from grid columns
- **Todo:** Integrate CSS grid into our grid system
2017-12-23 08:13:01 +08:00
2019-05-04 01:52:58 +08:00
## Content, Reboot, etc
2017-12-23 08:13:01 +08:00
2019-05-04 01:52:58 +08:00
Changes to Reboot, typography, tables, and more.
2017-12-23 08:13:01 +08:00
2019-05-04 01:52:58 +08:00
- **Todo:** Make RFS enabled by default
2019-07-16 00:31:50 +08:00
- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem` .
2019-07-16 00:53:10 +08:00
- Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
2019-07-26 00:12:14 +08:00
- Dropped `.pre-scrollable` class. [See #29135 ](https://github.com/twbs/bootstrap/pull/29135 )
2019-08-18 02:19:00 +08:00
- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267 ](https://github.com/twbs/bootstrap/pull/29267 )
2017-10-23 03:22:22 +08:00
2019-05-04 01:52:58 +08:00
## Forms
2017-12-31 08:38:09 +08:00
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
- Rearranged form documentation under its own top-level section.
- Split out old Forms page into several subpages
- Moved input groups docs under new Forms section
- Rearranged source Sass files under `scss/forms/` , including moving over input group styles.
- Combined native and custom checkboxes and radios into single `.form-check` class.
- New checks support sizing via `em` /`font-size` or explicit modifier classes now.
2019-07-16 00:43:59 +08:00
- New checks now appear larger by default for improved usability.
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
- Dropped `.custom-control` and associated classes.
2019-07-16 00:43:59 +08:00
- Renamed most `$custom-control` variables to `$form-control` ones.
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
- Combined native and custom selects into `.form-select` .
- Dropped `.custom-select` and associated classes.
2019-07-16 00:43:59 +08:00
- Renamed most `$custom-select` variables to `$form-select` ones.
- Updated file input component with same overall design, but improved HTML.
- Refactored `.form-file` markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
- Dropped native `.form-control-file` and `.form-control-range` components entirely.
- Renamed `.custom-file` to `.form-file` (including variables).
- Added support for `:focus` and `:disabled` styles.
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
- Renamed `.custom-range` to `.form-range` (including variables).
- Dropped `.form-group` for margin utilities (we've replaced our docs examples with `.mb-3` ).
- Dropped support for `.form-control-plaintext` inside `.input-group` s.
2017-12-23 07:29:49 +08:00
2019-05-04 01:52:58 +08:00
## Components
2017-12-23 07:29:49 +08:00
2019-05-04 01:52:58 +08:00
### Alerts
2017-12-23 07:29:49 +08:00
2019-05-04 01:52:58 +08:00
- **Todo:** Remove auto-darkening of `<hr>` elements in `.alert-*` class variants. `<hr>` s use `rgba()` for their color, so these should naturally blend anyway.
2017-12-23 07:29:49 +08:00
2019-05-04 01:52:58 +08:00
### Badges
2017-09-26 19:50:35 +08:00
2019-05-04 01:52:58 +08:00
Badges were overhauled to better differentiate themselves from buttons and to better utilize utility classes.
2017-08-21 04:54:12 +08:00
2019-05-04 01:52:58 +08:00
- **Todo:** Removed and replaced `.badge` modifier classes with background utility classes (e.g., use `.bg-primary` instead of `.badge-primary` )
- **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
- **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge` .
2017-08-23 01:56:04 +08:00
2019-06-30 21:59:58 +08:00
### Cards
- Removed the card columns in favor of a Masonry grid [See #28922 ](https://github.com/twbs/bootstrap/pull/28922 ).
2019-07-16 00:33:53 +08:00
### Icons (New!)
- Added new Bootstrap icons to the project for our documentation, form controls, and more.
- Removed Open Iconic icons from project source code for form controls.
2019-06-07 19:44:26 +08:00
### Jumbotron
- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
2019-08-03 22:27:33 +08:00
### Pagination
- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
2019-05-12 16:01:13 +08:00
### Popovers
- Renamed `.arrow` to `.popover-arrow`
### Tooltips
- Renamed `.arrow` to `.tooltip-arrow`
2019-05-20 16:03:51 +08:00
## Accessibility
- `.sr-only-focusable` does not require `.sr-only` anymore. [See #28720 ](https://github.com/twbs/bootstrap/pull/28720 ).
2019-05-04 01:52:58 +08:00
## Utilities
2017-08-21 04:54:12 +08:00
2019-06-04 23:51:36 +08:00
- Renamed `.text-monospace` to `.font-monospace`
2019-06-18 13:02:14 +08:00
- Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is `.order-5` instead of `.order-12` . [See #28874 ](https://github.com/twbs/bootstrap/pull/28874 ).
2019-05-04 01:52:58 +08:00
- **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore
- **Todo:** Split utilities into property-value utility classes and helpers
2017-08-23 01:56:04 +08:00
2019-08-27 13:44:35 +08:00
## Docs
- Removed "Wall of browser bugs" page because it has become obsolete
2019-05-04 01:52:58 +08:00
## Build tools
