mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-02 14:24:19 +01:00
aaf03bdc9e
* 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
114 lines
4.6 KiB
Markdown
114 lines
4.6 KiB
Markdown
---
|
|
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 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
|
|
|
|
## 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).
|
|
- **Todo:** Remove previously deprecated mixins
|
|
- `float()`
|
|
- `form-control-mixin()`
|
|
- `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/`)
|
|
- Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
|
|
|
|
## JavaScript
|
|
|
|
Changes to our source and compiled JavaScript files.
|
|
|
|
- Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
|
|
|
|
## 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).
|
|
- **Todo:** Remove `position: relative` from grid columns
|
|
- **Todo:** Integrate CSS grid into our grid system
|
|
|
|
## Content, Reboot, etc
|
|
|
|
Changes to Reboot, typography, tables, and more.
|
|
|
|
- **Todo:** Make RFS enabled by default
|
|
- Reset default horizontal `padding` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
|
|
|
|
## Forms
|
|
|
|
- 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.
|
|
- Dropped `.custom-control` and associated classes.
|
|
- Combined native and custom selects into `.form-select`.
|
|
- Dropped `.custom-select` and associated classes.
|
|
- Dropped native `.form-control-file` and `.form-control-range` components.
|
|
- Renamed `.custom-file` to `.form-file` (including variables).
|
|
- Refactored `.form-file` markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
|
|
- 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.
|
|
|
|
## Components
|
|
|
|
### Alerts
|
|
|
|
- **Todo:** Remove auto-darkening of `<hr>` elements in `.alert-*` class variants. `<hr>`s use `rgba()` for their color, so these should naturally blend anyway.
|
|
|
|
### Badges
|
|
|
|
Badges were overhauled to better differentiate themselves from buttons and to better utilize utility classes.
|
|
|
|
- **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`.
|
|
|
|
### Jumbotron
|
|
|
|
- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
|
|
|
|
### Popovers
|
|
|
|
- Renamed `.arrow` to `.popover-arrow`
|
|
|
|
### Tooltips
|
|
|
|
- Renamed `.arrow` to `.tooltip-arrow`
|
|
|
|
## Accessibility
|
|
|
|
- `.sr-only-focusable` does not require `.sr-only` anymore. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
|
|
|
|
## Utilities
|
|
|
|
- Renamed `.text-monospace` to `.font-monospace`
|
|
- 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).
|
|
- **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
|
|
|
|
## Build tools
|