'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -594,7 +596,7 @@ describe('Modal', () => {
})
it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
- fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl, {
@@ -624,8 +626,27 @@ describe('Modal', () => {
modal.show()
})
+ it('should not overflow when clicking outside of modal-content if backdrop = static', done => {
+ fixtureEl.innerHTML = '
'
+
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl, {
+ backdrop: 'static'
+ })
+
+ modalEl.addEventListener('shown.bs.modal', () => {
+ modalEl.click()
+ setTimeout(() => {
+ expect(modalEl.clientHeight === modalEl.scrollHeight).toEqual(true)
+ done()
+ }, 20)
+ })
+
+ modal.show()
+ })
+
it('should not adjust the inline body padding when it does not overflow', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -649,8 +670,40 @@ describe('Modal', () => {
modal.show()
})
+ it('should not adjust the inline body padding when it does not overflow, even on a scaled display', done => {
+ fixtureEl.innerHTML = '
'
+
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
+ const originalPadding = window.getComputedStyle(document.body).paddingRight
+
+ // Remove body margins as would be done by Bootstrap css
+ document.body.style.margin = '0'
+
+ // Hide scrollbars to prevent the body overflowing
+ document.body.style.overflow = 'hidden'
+
+ // Simulate a discrepancy between exact, i.e. floating point body width, and rounded body width
+ // as it can occur when zooming or scaling the display to something else than 100%
+ document.documentElement.style.paddingRight = '.48px'
+
+ modalEl.addEventListener('shown.bs.modal', () => {
+ const currentPadding = window.getComputedStyle(document.body).paddingRight
+
+ expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
+
+ // Restore overridden css
+ document.body.style.removeProperty('margin')
+ document.body.style.removeProperty('overflow')
+ document.documentElement.style.paddingRight = '16px'
+ done()
+ })
+
+ modal.show()
+ })
+
it('should enforce focus', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -684,7 +737,7 @@ describe('Modal', () => {
describe('hide', () => {
it('should hide a modal', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -699,6 +752,7 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual(null)
+ expect(modalEl.getAttribute('role')).toEqual(null)
expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
expect(modalEl.style.display).toEqual('none')
expect(document.querySelector('.modal-backdrop')).toBeNull()
@@ -709,7 +763,7 @@ describe('Modal', () => {
})
it('should close modal when clicking outside of modal-content', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -720,6 +774,7 @@ describe('Modal', () => {
modalEl.addEventListener('hidden.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual(null)
+ expect(modalEl.getAttribute('role')).toEqual(null)
expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
expect(modalEl.style.display).toEqual('none')
expect(document.querySelector('.modal-backdrop')).toBeNull()
@@ -730,7 +785,7 @@ describe('Modal', () => {
})
it('should do nothing is the modal is not shown', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -741,7 +796,7 @@ describe('Modal', () => {
})
it('should do nothing is the modal is transitioning', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -753,7 +808,7 @@ describe('Modal', () => {
})
it('should not hide a modal if hide is prevented', done => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -784,7 +839,7 @@ describe('Modal', () => {
describe('dispose', () => {
it('should dispose a modal', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -802,7 +857,7 @@ describe('Modal', () => {
describe('handleUpdate', () => {
it('should call adjust dialog', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
@@ -819,7 +874,7 @@ describe('Modal', () => {
it('should open modal', done => {
fixtureEl.innerHTML = [
'
',
- '
'
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
@@ -827,6 +882,7 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual('true')
+ expect(modalEl.getAttribute('role')).toEqual('dialog')
expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).toBeDefined()
@@ -839,7 +895,7 @@ describe('Modal', () => {
it('should not recreate a new modal', done => {
fixtureEl.innerHTML = [
'
',
- '
'
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
@@ -859,7 +915,7 @@ describe('Modal', () => {
it('should prevent default when the trigger is
or ', done => {
fixtureEl.innerHTML = [
'',
- '
'
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
@@ -869,6 +925,7 @@ describe('Modal', () => {
modalEl.addEventListener('shown.bs.modal', () => {
expect(modalEl.getAttribute('aria-modal')).toEqual('true')
+ expect(modalEl.getAttribute('role')).toEqual('dialog')
expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
expect(modalEl.style.display).toEqual('block')
expect(document.querySelector('.modal-backdrop')).toBeDefined()
@@ -882,7 +939,7 @@ describe('Modal', () => {
it('should focus the trigger on hide', done => {
fixtureEl.innerHTML = [
'
',
- '
'
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
@@ -913,7 +970,7 @@ describe('Modal', () => {
it('should not focus the trigger if the modal is not visible', done => {
fixtureEl.innerHTML = [
'
',
- '
'
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
@@ -944,7 +1001,7 @@ describe('Modal', () => {
it('should not focus the trigger if the modal is not shown', done => {
fixtureEl.innerHTML = [
'
',
- '
'
+ '
'
].join('')
const modalEl = fixtureEl.querySelector('.modal')
@@ -970,7 +1027,7 @@ describe('Modal', () => {
describe('jQueryInterface', () => {
it('should create a modal', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
@@ -983,7 +1040,7 @@ describe('Modal', () => {
})
it('should not re create a modal', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const modal = new Modal(div)
@@ -997,7 +1054,7 @@ describe('Modal', () => {
})
it('should throw error on undefined method', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const action = 'undefinedMethod'
@@ -1013,7 +1070,7 @@ describe('Modal', () => {
})
it('should should call show method', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const modal = new Modal(div)
@@ -1029,7 +1086,7 @@ describe('Modal', () => {
})
it('should should not call show method', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
@@ -1046,7 +1103,7 @@ describe('Modal', () => {
describe('getInstance', () => {
it('should return modal instance', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
const modal = new Modal(div)
@@ -1055,7 +1112,7 @@ describe('Modal', () => {
})
it('should return null when there is no modal instance', () => {
- fixtureEl.innerHTML = '
'
+ fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 70aa8eb3367e..a08fec20d6a6 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -27,7 +27,10 @@ describe('Tab', () => {
'
Home',
'
Profile',
'',
- '
'
+ '
'
].join('')
const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
@@ -48,7 +51,10 @@ describe('Tab', () => {
'
Home',
'
Profile',
'',
- '
'
+ '
',
+ ' ',
+ ' ',
+ '
'
].join('')
const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
@@ -444,7 +450,7 @@ describe('Tab', () => {
'
Home',
'
Profile',
'
',
- ' Dropdown',
+ ' Dropdown',
'
{{< /example >}}
diff --git a/site/content/docs/4.3/layout/containers.md b/site/content/docs/5.0/layout/containers.md
similarity index 85%
rename from site/content/docs/4.3/layout/containers.md
rename to site/content/docs/5.0/layout/containers.md
index 9b5afee74801..1562f51ae83f 100644
--- a/site/content/docs/4.3/layout/containers.md
+++ b/site/content/docs/5.0/layout/containers.md
@@ -1,7 +1,7 @@
---
layout: docs
title: Containers
-description: Containers are a fundamental building block of Bootstrap that contain, pad, and align your content withing a given device or viewport.
+description: Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
group: layout
toc: true
---
@@ -20,31 +20,31 @@ The table below illustrates how each container's `max-width` compares to the ori
See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
-
+
- |
-
+ | |
+
Extra small
<576px
|
-
+ |
Small
≥576px
|
-
+ |
Medium
≥768px
|
-
+ |
Large
≥992px
|
-
+ |
X-Large
≥1200px
|
-
+ |
XX-Large
≥1400px
|
@@ -52,7 +52,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
- .container |
+ .container |
100% |
540px |
720px |
@@ -61,7 +61,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
1320px |
- .container-sm |
+ .container-sm |
100% |
540px |
720px |
@@ -70,7 +70,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
1320px |
- .container-md |
+ .container-md |
100% |
100% |
720px |
@@ -79,7 +79,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
1320px |
- .container-lg |
+ .container-lg |
100% |
100% |
100% |
@@ -88,7 +88,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
1320px |
- .container-xl |
+ .container-xl |
100% |
100% |
100% |
@@ -97,7 +97,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
1320px |
- .container-xxl |
+ .container-xxl |
100% |
100% |
100% |
@@ -106,7 +106,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
1320px |
- .container-fluid |
+ .container-fluid |
100% |
100% |
100% |
diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/5.0/layout/grid.md
similarity index 96%
rename from site/content/docs/4.3/layout/grid.md
rename to site/content/docs/5.0/layout/grid.md
index b55abae04f40..fa25e52d5b37 100644
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/5.0/layout/grid.md
@@ -38,13 +38,13 @@ Breaking it down, here's how the grid system comes together:
- **Our grid supports [six responsive breakpoints]({{< docsref "/layout/breakpoints" >}}).** Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
-- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) fir combination of fluid and pixel widths.
+- **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths.
-- **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes]({{< docsref "layout/gutters" >}}) to change the spacing of your content.
+- **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to [uniformly apply column sizing](#row-columns) and [gutter classes]({{< docsref "/layout/gutters" >}}) to change the spacing of your content.
- **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `col-4` spans four). `width`s are set in percentages so you always have the same relative sizing.
-- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, verical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also availble to remove gutters.
+- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
@@ -61,7 +61,7 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
- Extra large (xl)
- Extra extra large (xxl)
-As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across thesse breakpoints:
+As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
@@ -122,7 +122,7 @@ As noted above, each of these breakpoints have their own container, unique class
| Custom gutters |
- Yes |
+ }}">Yes |
| Nestable |
@@ -130,7 +130,7 @@ As noted above, each of these breakpoints have their own container, unique class
| Column ordering |
- Yes |
+ }}">Yes |
diff --git a/site/content/docs/4.3/layout/gutters.md b/site/content/docs/5.0/layout/gutters.md
similarity index 93%
rename from site/content/docs/4.3/layout/gutters.md
rename to site/content/docs/5.0/layout/gutters.md
index 8640aae54772..87d2731a4743 100644
--- a/site/content/docs/4.3/layout/gutters.md
+++ b/site/content/docs/5.0/layout/gutters.md
@@ -10,7 +10,7 @@ toc: true
- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content.
-- **Gutters start are `1.5rem` (`20px`) wide.** This allows us to match our grid to the [padding and margin spacers]({{< docsref "/utilities/spacing" >}}) scale.
+- **Gutters start at `1.5rem` (`24px`) wide.** This allows us to match our grid to the [padding and margin spacers]({{< docsref "/utilities/spacing" >}}) scale.
- **Gutters can be responsively adjusted.** Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.
@@ -94,7 +94,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
## Row columns gutters
-Gutter classes can also be added to [row columns](#row-columns). In the following example, we use responsive row columns and responsive gutter classes.
+Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
{{< example >}}
diff --git a/site/content/docs/4.3/layout/utilities.md b/site/content/docs/5.0/layout/utilities.md
similarity index 100%
rename from site/content/docs/4.3/layout/utilities.md
rename to site/content/docs/5.0/layout/utilities.md
diff --git a/site/content/docs/4.3/layout/z-index.md b/site/content/docs/5.0/layout/z-index.md
similarity index 100%
rename from site/content/docs/4.3/layout/z-index.md
rename to site/content/docs/5.0/layout/z-index.md
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/5.0/migration.md
similarity index 78%
rename from site/content/docs/4.3/migration.md
rename to site/content/docs/5.0/migration.md
index 98b7036a6bb4..6499846a158b 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -7,18 +7,35 @@ aliases: "/migration/"
toc: true
---
-## Browser support
+## v5.0.0-alpha2
+
+### Components
+
+#### Popovers
+
+- Renamed `whiteList` option to `allowList`
+
+#### Tooltips
+
+- Renamed `whiteList` option to `allowList`
+
+---
+
+## v5.0.0-alpha1
+
+### 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
+- 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
-## Sass
+### Sass
Changes to our source Sass files and compiled CSS.
@@ -44,38 +61,42 @@ Changes to our source Sass files and compiled CSS.
- 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]({{< 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/)
- - `$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`.
+ - `$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`.
+- Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter.
+- 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.
+- 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.
-## JavaScript
+### 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()`.
-## Color system
+### Color system
We've updated the color system that powers Bootstrap to improve color contrast and provide a much more extensive set of colors.
-- Updated blue and pink base colors (`-500`) to ensure AA contrast.
+- Updated blue and pink base colors (`-500`) to ensure WCAG 2.1 AA contrast.
- 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.
-## Grid and layout
+### 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).
+- Dropped the `.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 responsive gutter classes can be used to control the gutter width in 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.
+- `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.
-## Content, Reboot, etc
+### Content, Reboot, etc
Changes to Reboot, typography, tables, and more.
@@ -85,22 +106,23 @@ Changes to Reboot, typography, tables, and more.
- 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.
+- Split table cell padding variables into `-y` and `-x`.
- Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
- `.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)
- Drop `.text-justify` class. [See #229793](https://github.com/twbs/bootstrap/pull/29793)
-## Typography
+### Typography
- Removed `$display-*` variables for a new `$display-font-sizes` Sass map.
-- Removed individiual `$display-*-weight` variables for a single `$display-font-weight`.
+- Removed individual `$display-*-weight` variables for a single `$display-font-weight`.
- 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.
-## Forms
+### 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
+ - Moved input groups docs under the 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.
@@ -110,7 +132,7 @@ Changes to Reboot, typography, tables, and more.
- Combined native and custom selects into `.form-select`.
- Dropped `.custom-select` and associated classes.
- Renamed most `$custom-select` variables to `$form-select` ones.
-- Updated file input component with same overall design, but improved HTML.
+- Updated file input component with the 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).
@@ -123,19 +145,19 @@ Changes to Reboot, typography, tables, and more.
- 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.
- 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)
-## Components
+### Components
- 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).
-### Disabled states
+#### Disabled states
- 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).
-### Alerts
+#### Alerts
- **Todo:** Remove auto-darkening of `
` elements in `.alert-*` class variants. `
`s use `rgba()` for their color, so these should naturally blend anyway.
-### Badges
+#### Badges
Badges were overhauled to better differentiate themselves from buttons and to better utilize utility classes.
@@ -143,36 +165,40 @@ Badges were overhauled to better differentiate themselves from buttons and to be
- **Todo:** Removed `.badge-pill` for the `.rounded-pill` utility class
- **Todo:** Removed badge's hover and focus styles for `a.badge` and `button.badge`.
-### Cards
+#### Buttons
+
+- 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).
+
+#### Cards
- Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922).
-- Removed card decks in favor of the grid which adds more flexibility over responsive behaviour.
+- Removed card decks in favor of the grid which adds more flexibility over responsive behavior.
-### Jumbotron
+#### Jumbotron
- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
-### Navbars
+#### Navbars
- 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.
-### Pagination
+#### Pagination
- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
-### Popovers
+#### Popovers
- Renamed `.arrow` to `.popover-arrow`
-### Tooltips
+#### Tooltips
- Renamed `.arrow` to `.tooltip-arrow`
-## Accessibility
+### Accessibility
- `.sr-only-focusable` does not require `.sr-only` anymore. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
-## Utilities
+### 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).
@@ -182,8 +208,12 @@ Badges were overhauled to better differentiate themselves from buttons and to be
- **Todo:** Split utilities into property-value utility classes and helpers
- 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.
-## Docs
+### Docs
+
+- Removed "Wall of browser bugs" page because it has become obsolete
+- Switched from Jekyll to Hugo
-- Removed "Wall of browser bugs" page because it has become obsolete
+### Build tools
-## Build tools
+- Updated all devDependencies
+- We support only the latest Node.js LTS releases which are 10 and 12 at the time of writing
diff --git a/site/content/docs/4.3/utilities/api.md b/site/content/docs/5.0/utilities/api.md
similarity index 99%
rename from site/content/docs/4.3/utilities/api.md
rename to site/content/docs/5.0/utilities/api.md
index e52f52d298e3..eb7d016738a5 100644
--- a/site/content/docs/4.3/utilities/api.md
+++ b/site/content/docs/5.0/utilities/api.md
@@ -3,7 +3,7 @@ layout: docs
title: Utility API
description: The utility API is a Sass based tool to generate utility classes.
group: utilities
-aliases: "/docs/4.3/utilities/"
+aliases: "/docs/5.0/utilities/"
toc: true
---
diff --git a/site/content/docs/4.3/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
similarity index 100%
rename from site/content/docs/4.3/utilities/borders.md
rename to site/content/docs/5.0/utilities/borders.md
diff --git a/site/content/docs/4.3/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md
similarity index 71%
rename from site/content/docs/4.3/utilities/colors.md
rename to site/content/docs/5.0/utilities/colors.md
index cef79ab6623f..6ca7a7d1235c 100644
--- a/site/content/docs/4.3/utilities/colors.md
+++ b/site/content/docs/5.0/utilities/colors.md
@@ -6,6 +6,16 @@ group: utilities
toc: true
---
+{{< callout info >}}
+##### Dealing with specificity
+
+Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class.
+{{< /callout >}}
+
+{{< callout info >}}
+{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
## Color
Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
@@ -13,7 +23,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
{{< example >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
-
.text-{{ .name }}
+
.text-{{ .name }}
{{- end -}}
{{< /colors.inline >}}
.text-body
@@ -30,7 +40,7 @@ Similar to the contextual text color classes, easily set the background of an el
{{< example >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
-
.bg-{{ .name }}
+
.bg-{{ .name }}
{{- end -}}
{{< /colors.inline >}}
.bg-white
@@ -39,22 +49,14 @@ Similar to the contextual text color classes, easily set the background of an el
## Background gradient
-When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{< docsref "/customize/sass" >}}) to enable these classes and more.
+By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
+
+Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`.
{{< markdown >}}
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
-- `.bg-gradient-{{ .name }}`
+
.bg-{{ .name }}.bg-gradient
{{- end -}}
{{< /colors.inline >}}
{{< /markdown >}}
-
-{{< callout info >}}
-#### Dealing with specificity
-
-Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `
` with the class.
-{{< /callout >}}
-
-{{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{< /callout >}}
diff --git a/site/content/docs/4.3/utilities/display.md b/site/content/docs/5.0/utilities/display.md
similarity index 94%
rename from site/content/docs/4.3/utilities/display.md
rename to site/content/docs/5.0/utilities/display.md
index b80266af03bd..0f7deca180e3 100644
--- a/site/content/docs/4.3/utilities/display.md
+++ b/site/content/docs/5.0/utilities/display.md
@@ -16,24 +16,24 @@ Display utility classes that apply to all [breakpoints]({{< docsref "/layout/bre
As such, the classes are named using the format:
-* `.d-{value}` for `xs`
-* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
+- `.d-{value}` for `xs`
+- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
Where *value* is one of:
-* `none`
-* `inline`
-* `inline-block`
-* `block`
-* `table`
-* `table-cell`
-* `table-row`
-* `flex`
-* `inline-flex`
+- `none`
+- `inline`
+- `inline-block`
+- `block`
+- `table`
+- `table-cell`
+- `table-row`
+- `flex`
+- `inline-flex`
The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
-The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg`, `xl`, and `xxl` screens.
+The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg`, `xl`, and `xxl` screens.
## Examples
diff --git a/site/content/docs/4.3/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md
similarity index 97%
rename from site/content/docs/4.3/utilities/flex.md
rename to site/content/docs/5.0/utilities/flex.md
index 58043a47aa36..c4806ac6a0a0 100644
--- a/site/content/docs/4.3/utilities/flex.md
+++ b/site/content/docs/5.0/utilities/flex.md
@@ -78,7 +78,7 @@ Responsive variations also exist for `flex-direction`.
## Justify content
-Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`.
+Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
@@ -106,6 +106,11 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
Flex item
Flex item
+
+
Flex item
+
Flex item
+
Flex item
+
{{< highlight html >}}
@@ -114,6 +119,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
...
...
...
+
...
{{< /highlight >}}
Responsive variations also exist for `justify-content`.
@@ -126,6 +132,7 @@ Responsive variations also exist for `justify-content`.
- `.justify-content{{ .abbr }}-center`
- `.justify-content{{ .abbr }}-between`
- `.justify-content{{ .abbr }}-around`
+- `.justify-content{{ .abbr }}-evenly`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
@@ -272,7 +279,7 @@ Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill ava
{{< /example >}}
-Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap it's contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
+Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
{{< example >}}
diff --git a/site/content/docs/4.3/utilities/float.md b/site/content/docs/5.0/utilities/float.md
similarity index 100%
rename from site/content/docs/4.3/utilities/float.md
rename to site/content/docs/5.0/utilities/float.md
diff --git a/site/content/docs/4.3/utilities/interactions.md b/site/content/docs/5.0/utilities/interactions.md
similarity index 100%
rename from site/content/docs/4.3/utilities/interactions.md
rename to site/content/docs/5.0/utilities/interactions.md
diff --git a/site/content/docs/4.3/utilities/overflow.md b/site/content/docs/5.0/utilities/overflow.md
similarity index 100%
rename from site/content/docs/4.3/utilities/overflow.md
rename to site/content/docs/5.0/utilities/overflow.md
diff --git a/site/content/docs/4.3/utilities/position.md b/site/content/docs/5.0/utilities/position.md
similarity index 100%
rename from site/content/docs/4.3/utilities/position.md
rename to site/content/docs/5.0/utilities/position.md
diff --git a/site/content/docs/4.3/utilities/shadows.md b/site/content/docs/5.0/utilities/shadows.md
similarity index 100%
rename from site/content/docs/4.3/utilities/shadows.md
rename to site/content/docs/5.0/utilities/shadows.md
diff --git a/site/content/docs/4.3/utilities/sizing.md b/site/content/docs/5.0/utilities/sizing.md
similarity index 100%
rename from site/content/docs/4.3/utilities/sizing.md
rename to site/content/docs/5.0/utilities/sizing.md
diff --git a/site/content/docs/4.3/utilities/spacing.md b/site/content/docs/5.0/utilities/spacing.md
similarity index 73%
rename from site/content/docs/4.3/utilities/spacing.md
rename to site/content/docs/5.0/utilities/spacing.md
index ce32ad499f7b..e7a2960877c4 100644
--- a/site/content/docs/4.3/utilities/spacing.md
+++ b/site/content/docs/5.0/utilities/spacing.md
@@ -18,28 +18,28 @@ The classes are named using the format `{property}{sides}-{size}` for `xs` and `
Where *property* is one of:
-* `m` - for classes that set `margin`
-* `p` - for classes that set `padding`
+- `m` - for classes that set `margin`
+- `p` - for classes that set `padding`
Where *sides* is one of:
-* `t` - for classes that set `margin-top` or `padding-top`
-* `b` - for classes that set `margin-bottom` or `padding-bottom`
-* `l` - for classes that set `margin-left` or `padding-left`
-* `r` - for classes that set `margin-right` or `padding-right`
-* `x` - for classes that set both `*-left` and `*-right`
-* `y` - for classes that set both `*-top` and `*-bottom`
-* blank - for classes that set a `margin` or `padding` on all 4 sides of the element
+- `t` - for classes that set `margin-top` or `padding-top`
+- `b` - for classes that set `margin-bottom` or `padding-bottom`
+- `l` - for classes that set `margin-left` or `padding-left`
+- `r` - for classes that set `margin-right` or `padding-right`
+- `x` - for classes that set both `*-left` and `*-right`
+- `y` - for classes that set both `*-top` and `*-bottom`
+- blank - for classes that set a `margin` or `padding` on all 4 sides of the element
Where *size* is one of:
-* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
-* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
-* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5`
-* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer`
-* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
-* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3`
-* `auto` - for classes that set the `margin` to auto
+- `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
+- `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
+- `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5`
+- `3` - (by default) for classes that set the `margin` or `padding` to `$spacer`
+- `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
+- `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3`
+- `auto` - for classes that set the `margin` to auto
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
diff --git a/site/content/docs/4.3/utilities/text.md b/site/content/docs/5.0/utilities/text.md
similarity index 95%
rename from site/content/docs/4.3/utilities/text.md
rename to site/content/docs/5.0/utilities/text.md
index d7a8e97b09b2..aad34a35dea1 100644
--- a/site/content/docs/4.3/utilities/text.md
+++ b/site/content/docs/5.0/utilities/text.md
@@ -45,7 +45,7 @@ Prevent text from wrapping with a `.text-nowrap` class.
## Word break
-Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support.
+Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.
{{< example >}}
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
diff --git a/site/content/docs/4.3/utilities/vertical-align.md b/site/content/docs/5.0/utilities/vertical-align.md
similarity index 100%
rename from site/content/docs/4.3/utilities/vertical-align.md
rename to site/content/docs/5.0/utilities/vertical-align.md
diff --git a/site/content/docs/4.3/utilities/visibility.md b/site/content/docs/5.0/utilities/visibility.md
similarity index 100%
rename from site/content/docs/4.3/utilities/visibility.md
rename to site/content/docs/5.0/utilities/visibility.md
diff --git a/site/content/docs/_index.html b/site/content/docs/_index.html
index 9f56983c15ea..0a758d2bfc67 100644
--- a/site/content/docs/_index.html
+++ b/site/content/docs/_index.html
@@ -1,5 +1,5 @@
---
layout: redirect
sitemap_exclude: true
-redirect: "/docs/4.3/getting-started/introduction/"
+redirect: "/docs/5.0/getting-started/introduction/"
---
diff --git a/site/data/core-team.yml b/site/data/core-team.yml
index 5fbae850699e..f59b4285c6b0 100644
--- a/site/data/core-team.yml
+++ b/site/data/core-team.yml
@@ -27,3 +27,6 @@
- name: Shohei Yoshida
user: ysds
+
+- name: Gaël Poupard
+ user: ffoodd
diff --git a/site/data/docs-versions.yml b/site/data/docs-versions.yml
index e7062cbdf312..bebbf16f4366 100644
--- a/site/data/docs-versions.yml
+++ b/site/data/docs-versions.yml
@@ -29,17 +29,24 @@
- group: v3.x
baseurl: "https://getbootstrap.com/docs"
- description: "Our previous major release and its minor versions. Last update was v3.4.1."
+ description: "Every minor and patch release from v3 is listed below. Last update was v3.4.1."
versions:
- v: "3.3"
- v: "3.4"
- group: v4.x
baseurl: "https://getbootstrap.com/docs"
- description: "Current major release and its minor releases. Last update was v4.4.1."
+ description: "Our previous major release with its minor releases. Last update was v4.5.0."
versions:
- v: "4.0"
- v: "4.1"
- v: "4.2"
- v: "4.3"
- v: "4.4"
+ - v: "4.5"
+
+- group: v5.x
+ baseurl: "https://v5.getbootstrap.com/docs"
+ description: "Current major release. Last update was v5.0.0-alpha1."
+ versions:
+ - v: "5.0"
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 4864085c0ff3..195cf3af3bf4 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -44,7 +44,7 @@
- title: Overview
- title: Form control
- title: Select
- - title: Checks
+ - title: Checks & radios
- title: File
- title: Range
- title: Input group
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 41757d423a91..2e5bac7fcf01 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -27,7 +27,7 @@
{{ .Title | markdownify }}
{{ end }}
-
+
{{ if .Page.Params.sections }}
{{ range .Page.Params.sections }}
@@ -47,5 +47,9 @@
{{ .Title | markdownify }}
{{ partial "footer" . }}
{{ partial "scripts" . }}
+
+ {{ range .Page.Params.extra_js -}}
+
+ {{- end -}}
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index 6142e29ad511..3fe1ac9bdd81 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -44,13 +44,13 @@
{{ if ne .Page.Params.include_js false -}}
{{- if eq hugo.Environment "production" -}}
-
+
{{- else -}}
{{- end }}
{{ range .Page.Params.extra_js -}}
-
+
{{- end -}}
{{- end }}
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 8ffbda50b766..fd228314f4ee 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -13,16 +13,38 @@
{{ .Title | markdownify }}
{{ .Page.Params.Description | markdownify }}
{{ if eq .Title "Examples" }}
- Download source code
- Download Examples
+
{{ end }}
{{ partial "ads" . }}
{{ .Content }}
+
+ {{ if eq .Title "Examples" }}
+
+
+
+
+ {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
+
+
Go further with Bootstrap Themes
+
+ Need something more than these examples? Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+
+
Browse themes
+
+
+
+ {{ end }}
+
+ 