2014-12-17 05:31:36 +01:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2019-05-03 19:52:58 +02: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 02:47:45 +02:00
group: migration
2019-01-08 17:33:28 +01:00
aliases: "/migration/"
2017-05-29 21:01:04 +02:00
toc: true
2014-12-17 05:31:36 +01:00
---
2020-07-01 14:43:06 +02:00
## v5.0.0-alpha2
2020-07-03 13:38:11 +02:00
### Sass
2020-07-13 20:40:27 +02:00
- "Screen reader" classes are now "visually hidden" classes.
- 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()` .
2020-09-09 10:28:52 +02:00
- Add border width utility, see [31484 ](https://github.com/twbs/bootstrap/pull/31484 )
2020-07-13 20:40:27 +02:00
### Docs
- Renamed "Screen readers" helper page to "Visually hidden", and filename to `visually-hidden`
- Renamed "Checks" page to "Checks & radios", and filename to `checks-radios`
- Improved documentation of check/radio powered button groups
### Reboot
- Updated `th` styling to use a default `null` value for `font-weight` and inherit `text-align` instead of setting explicitly.
2020-07-03 13:38:11 +02:00
2020-07-13 20:23:38 +02:00
### Colors
- Bumped color contrast ratio from 3:1 to 4.5:1.
- Set `$black` as color contrast color instead of `$gray-900` .
- Improved `$green` (and its theme alias `$success` ) color to reach new minimum color contrast (moving from `#28a745` to `#198754` ).
- Improved `$cyan` (and its theme alias `$info` ) color to be more vibrant (moving from `#17a2b8` to `#0dcaf0` ).
2020-08-03 18:42:31 +02:00
### Forms
- Resized checks and radios to be `1em` instead of `1.25em` in an effort to make them scale better with custom `$font-size-base` values and more.
2020-07-01 14:43:06 +02:00
### Components
2020-08-02 15:28:23 +02:00
### Badges
- Increased default padding for badges from `.25em` /`.5em` to `.35em` /`.65em`.
2020-07-12 06:56:33 +02:00
#### Buttons
- Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin. [See #30639. ](https://github.com/twbs/bootstrap/pull/30639 )
2020-07-13 20:40:27 +02:00
#### Navs
- Added new `null` variables for `font-size` , `font-weight` , `color` , and `:hover` `color` to the `.nav-link` class.
2020-07-01 14:43:06 +02:00
#### Popovers
2020-08-03 18:42:31 +02:00
- Renamed `whiteList` option to `allowList` .
2020-07-01 14:43:06 +02:00
2020-07-12 14:43:26 +02:00
#### Toasts
2020-08-03 18:42:31 +02:00
- Made default toast duration 5 seconds.
- Removed `overflow: hidden` from toasts and replaced with proper `border-radius` s with `calc()` functions.
2020-07-12 14:43:26 +02:00
2020-07-01 14:43:06 +02:00
#### Tooltips
2020-08-03 18:42:31 +02:00
- Renamed `whiteList` option to `allowList` .
2020-07-01 14:43:06 +02:00
---
## v5.0.0-alpha1
### Browser support
2018-01-18 02:29:28 +01:00
2019-05-03 19:52:58 +02: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 02:29:28 +01:00
2020-03-09 14:37:46 +01:00
- Dropped support for Internet Explorer 10 and 11
2020-07-01 14:43:06 +02:00
- Dropped support for Microsoft Edge < 16
- Dropped support for Firefox < 60
- Dropped support for Safari < 10
- Dropped support for iOS Safari < 10
- Dropped support for Chrome < 60
- Dropped support for Android < 6
2018-01-18 02:29:28 +01:00
2020-07-01 14:43:06 +02:00
### Sass
2018-01-18 02:29:28 +01:00
2019-05-03 19:52:58 +02:00
Changes to our source Sass files and compiled CSS.
2018-01-18 02:29:28 +01:00
2018-09-18 01:10:07 +02: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 10:33:26 +02:00
- Remove previously deprecated mixins
2019-05-03 19:52:58 +02:00
- `float()`
- `form-control-mixin()`
2019-08-21 10:33:26 +02:00
- `nav-divider()`
2019-05-03 19:52:58 +02:00
- `retina-img()`
- `text-hide()` (also dropped the associated utility class, `.text-hide` )
- `visibility()`
2019-12-14 14:27:59 +01:00
- `form-control-focus()`
2020-08-03 18:42:31 +02:00
- Rearranged forms source files under `scss/forms/` . [See Forms section for more details. ](#forms )
2019-05-09 07:57:59 +02: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 09:41:13 +02: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 )
2020-02-03 21:02:53 +01:00
- `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146 ](https://github.com/twbs/bootstrap/pull/29146 )
2020-04-14 02:48:19 +02:00
- Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity.
2019-08-30 09:42:41 +02:00
- 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 )
2020-03-23 18:03:56 +01:00
- 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()` .
2020-04-14 02:55:33 +02:00
- 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 ]({{< docsref "/customize/sass#maps-and-loops" >}} ).
- `color-yiq()` function and related variables are renamed to `color-contrast()` since it's not related to YIQ colorspace anymore. [See #30168. ](https://github.com/twbs/bootstrap/pull/30168/ )
2020-04-15 13:13:45 +02:00
- `$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` .
2020-04-14 16:28:20 +02:00
- Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter.
2020-04-15 13:13:45 +02:00
- The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes.
2020-04-18 13:02:26 +02:00
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
2020-08-04 20:51:19 +02:00
- The `box-shadow()` mixin now better supports `none` and `null` with multiple arguments. Now you can pass multiple arguements with either value, and get the expected output. [See #30394 ](https://github.com/twbs/bootstrap/pull/30394 ).
2020-09-01 23:17:17 +02:00
- Each `border-radius()` mixin now has a default value. You can now call these mixins without specifying a border radius value and the `$border-radius` variable will be used. [See #31571 ](https://github.com/twbs/bootstrap/pull/31571 )
2017-10-22 21:22:22 +02:00
2020-07-01 14:43:06 +02:00
### JavaScript
2017-10-22 21:22:22 +02:00
2019-05-03 19:52:58 +02:00
Changes to our source and compiled JavaScript files.
2017-12-23 01:13:01 +01:00
2019-05-03 19:52:58 +02:00
- Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
2019-07-29 11:17:42 +02:00
- Removed underscore from public static methods like `_getInstance()` → `getInstance()` .
2017-12-23 01:13:01 +01:00
2020-07-01 14:43:06 +02:00
### Color system
2020-04-14 02:55:33 +02:00
We've updated the color system that powers Bootstrap to improve color contrast and provide a much more extensive set of colors.
2020-07-01 14:43:06 +02:00
- Updated blue and pink base colors (`-500`) to ensure WCAG 2.1 AA contrast.
2020-04-27 19:19:08 +02:00
- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
- To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
2020-04-14 02:55:33 +02:00
2020-07-01 14:43:06 +02:00
### Grid and layout
2017-12-23 01:13:01 +01:00
2019-05-03 19:52:58 +02:00
Changes to any layout tools and our grid system.
2017-12-23 01:13:01 +01:00
2020-04-15 13:13:45 +02:00
- Dropped the `.media` component as it can be built with utility classes. [See #28265 ](https://github.com/twbs/bootstrap/pull/28265 ).
2019-09-28 16:16:52 +02:00
- 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.
2020-04-15 13:13:45 +02:00
- The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions.
2019-09-28 16:16:52 +02:00
- The gutter width is now set in `rem` and decreased from `30px` to `1.5rem` (24px).
2020-04-15 13:13:45 +02:00
- `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` is not applied to each element.
2017-12-23 01:13:01 +01:00
2020-07-01 14:43:06 +02:00
### Content, Reboot, etc
2017-12-23 01:13:01 +01:00
2019-05-03 19:52:58 +02:00
Changes to Reboot, typography, tables, and more.
2017-12-23 01:13:01 +01:00
2019-11-01 11:22:29 +01:00
- [RFS ]({{< docsref "/getting-started/rfs" >}} ) enabled for automated font size rescaling. [See #29152 ](https://github.com/twbs/bootstrap/pull/29152 )
2019-07-15 18:31:50 +02:00
- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem` .
2020-03-24 15:00:00 +01:00
- Simplified table styles (no more odd top border) and tightened cell padding.
- Nested tables do not inherit styles anymore.
- `.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` ).
- The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (colon name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
2020-05-14 19:43:33 +02:00
- Split table cell padding variables into `-y` and `-x` .
2019-07-25 18:12:14 +02:00
- Dropped `.pre-scrollable` class. [See #29135 ](https://github.com/twbs/bootstrap/pull/29135 )
2019-08-17 20:19:00 +02: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 )
2020-08-06 01:00:32 +02:00
- Drop `.text-justify` class. [See #29793 ](https://github.com/twbs/bootstrap/pull/29793 )
2017-10-22 21:22:22 +02:00
2020-07-01 14:43:06 +02:00
### Typography
2020-04-14 13:57:11 +02:00
- Removed `$display-*` variables for a new `$display-font-sizes` Sass map.
2020-06-17 18:53:11 +02:00
- Removed individual `$display-*-weight` variables for a single `$display-font-weight` .
2020-04-14 13:57:11 +02:00
- Added two new `.display-*` heading styles, `.display-5` and `.display-6` .
- Resized existing display headings for a slightly more consistent set of `font-size` s.
2020-07-01 14:43:06 +02:00
### Forms
2017-12-31 01:38:09 +01: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-12 23:52:33 +02:00
- Rearranged form documentation under its own top-level section.
- Split out old Forms page into several subpages
2020-04-15 13:13:45 +02:00
- Moved input groups docs under the new Forms section
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-12 23:52:33 +02:00
- 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-15 18:43:59 +02: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-12 23:52:33 +02:00
- Dropped `.custom-control` and associated classes.
2019-07-15 18:43:59 +02: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-12 23:52:33 +02:00
- Combined native and custom selects into `.form-select` .
- Dropped `.custom-select` and associated classes.
2019-07-15 18:43:59 +02:00
- Renamed most `$custom-select` variables to `$form-select` ones.
2020-04-15 13:13:45 +02:00
- Updated file input component with the same overall design, but improved HTML.
2019-07-15 18:43:59 +02:00
- 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-12 23:52:33 +02:00
- Renamed `.custom-range` to `.form-range` (including variables).
- Dropped `.form-group` for margin utilities (we've replaced our docs examples with `.mb-3` ).
2019-09-28 16:16:52 +02:00
- Dropped `.form-row` for the more flexible grid gutters.
- Dropped `.form-inline` for the more flexible grid.
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-12 23:52:33 +02:00
- Dropped support for `.form-control-plaintext` inside `.input-group` s.
2019-12-19 15:28:40 +01:00
- Dropped `.input-group-append` and `.input-group-prepend` . You can now just add buttons and `.input-group-text` as direct children of the input groups.
2020-03-31 20:02:57 +02:00
- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476 ](https://github.com/twbs/bootstrap/pull/30476 )
2017-12-23 00:29:49 +01:00
2020-07-01 14:43:06 +02:00
### Components
2017-12-23 00:29:49 +01:00
2020-04-30 15:17:08 +02:00
- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564 ](https://github.com/twbs/bootstrap/pull/30564 ).
2020-07-01 14:43:06 +02:00
#### Disabled states
2019-12-27 17:40:06 +01:00
- Disabled states of the buttons, close button, pagination link & form range now have `pointer-events: none` added. This simplifies our codebase and makes it easier to override active states in CSS. [#29296 ](https://github.com/twbs/bootstrap/pull/29296 ).
2020-07-01 14:43:06 +02:00
#### Alerts
2017-12-23 00:29:49 +01:00
2020-08-03 18:42:31 +02:00
- Removed 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 00:29:49 +01:00
2020-07-01 14:43:06 +02:00
#### Badges
2017-09-26 13:50:35 +02:00
2019-05-03 19:52:58 +02:00
Badges were overhauled to better differentiate themselves from buttons and to better utilize utility classes.
2017-08-20 22:54:12 +02:00
2020-08-03 18:42:31 +02:00
- Removed and replaced `.badge` modifier classes with background utility classes (e.g., use `.bg-primary` instead of `.badge-primary` )
- Removed `.badge-pill` for the `.rounded-pill` utility class
- Removed badge's hover and focus styles for `a.badge` and `button.badge` .
2017-08-22 19:56:04 +02:00
2020-07-01 14:43:06 +02:00
#### Buttons
2020-05-02 11:11:24 +02:00
2020-06-27 20:31:59 +02:00
- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks and radios ]({{< docsref "/forms/checks-radios#toggle-buttons" >}} ) docs. The `.btn-check` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650 ](https://github.com/twbs/bootstrap/pull/30650 ).
2020-05-02 11:11:24 +02:00
2020-07-01 14:43:06 +02:00
#### Cards
2019-06-30 15:59:58 +02:00
- Removed the card columns in favor of a Masonry grid [See #28922 ](https://github.com/twbs/bootstrap/pull/28922 ).
2020-04-15 13:13:45 +02:00
- Removed card decks in favor of the grid which adds more flexibility over responsive behavior.
2019-06-30 15:59:58 +02:00
2020-07-01 14:43:06 +02:00
#### Jumbotron
2019-06-07 13:44:26 +02:00
- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
2020-07-01 14:43:06 +02:00
#### Navbars
2019-10-28 04:26:52 +01:00
- All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.
2020-07-01 14:43:06 +02:00
#### Pagination
2019-08-03 16:27:33 +02:00
- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
2020-07-01 14:43:06 +02:00
#### Popovers
2019-05-12 10:01:13 +02:00
- Renamed `.arrow` to `.popover-arrow`
2020-07-01 14:43:06 +02:00
#### Tooltips
2019-05-12 10:01:13 +02:00
- Renamed `.arrow` to `.tooltip-arrow`
2020-07-01 14:43:06 +02:00
### Accessibility
2019-05-20 10:03:51 +02:00
2020-07-03 13:38:11 +02:00
- Unlike the old `.sr-only-focusable` , which only worked in combination with `.sr-only` , `.sr-only-focusable` can be used as a standalone class without `.sr-only` . [See #28720 ](https://github.com/twbs/bootstrap/pull/28720 ).
2019-05-20 10:03:51 +02:00
2020-07-01 14:43:06 +02:00
### Utilities
2017-08-20 22:54:12 +02:00
2019-06-04 17:51:36 +02:00
- Renamed `.text-monospace` to `.font-monospace`
2019-06-18 07:02:14 +02: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-08-30 09:42:41 +02:00
- New `line-height` utilities: `.lh-1` , `.lh-sm` , `.lh-base` and `.lh-lg` . See [here ]({{< docsref "/utilities/text#line-height" >}} ).
2019-10-10 20:18:19 +02:00
- Added `.bg-body` for quickly setting the `<body>` 's background to additional elements.
2020-08-03 18:42:31 +02:00
- Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore
- Split utilities into property-value utility classes and helpers
2020-04-15 06:36:35 +02:00
- Negative margin utilities are disabled by default. You can re-enable them by setting `$enable-negative-margins: true` , but keep in mind this can increase the file size quite a lot.
2017-08-22 19:56:04 +02:00
2020-07-01 14:43:06 +02:00
### Docs
2019-08-27 07:44:35 +02:00
2020-05-14 08:01:40 +02:00
- Removed "Wall of browser bugs" page because it has become obsolete
2020-07-01 14:43:06 +02:00
- Switched from Jekyll to Hugo
### Build tools
2019-08-27 07:44:35 +02:00
2020-07-01 14:43:06 +02:00
- Updated all devDependencies
- We support only the latest Node.js LTS releases which are 10 and 12 at the time of writing
