diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index 3cda6f2d57f0..4de04abcda0d 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -1072,7 +1072,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap | `reference` | string, element | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). | | `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. | | `offset` | number, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`
When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1).
For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). | -| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
Note: the dropdown can always be closed with the ESC key +| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
Note: the dropdown can always be closed with the ESC key | | `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options)
When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. | {{< /bs-table >}} diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index dd836da589a9..79149a7739e0 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -568,37 +568,14 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SizeClassModal max-width
Small.modal-sm300px
DefaultNone500px
Large.modal-lg800px
Extra large.modal-xl1140px
+{{< bs-table "table bs-js-table" >}} +| Size | Class | Modal max-width +| --- | --- | --- | +| Small | `.modal-sm` | `300px` | +| Default | None | `500px` | +| Large | `.modal-lg` | `800px` | +| Extra large | `.modal-xl` | `1140px` | +{{< /bs-table >}} Our default modal without modifier class constitutes the "medium" size modal. diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index fe0a49140534..80ffd9b85f3b 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -84,52 +84,54 @@ This `font-family` is applied to the `` and automatically inherited global All heading elements—e.g., `

`—and `

` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeadingExample
- {{< markdown >}}`

`{{< /markdown >}} - 		h1. Bootstrap heading
- {{< markdown >}}`

`{{< /markdown >}} - 		h2. Bootstrap heading
- {{< markdown >}}`

`{{< /markdown >}} - 		h3. Bootstrap heading
- {{< markdown >}}`

`{{< /markdown >}} - 		h4. Bootstrap heading
- {{< markdown >}}`
`{{< /markdown >}} - 		h5. Bootstrap heading
- {{< markdown >}}`
`{{< /markdown >}} - 		h6. Bootstrap heading
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeadingExample
+ {{< markdown >}}`

`{{< /markdown >}} + 		h1. Bootstrap heading
+ {{< markdown >}}`

`{{< /markdown >}} + 		h2. Bootstrap heading
+ {{< markdown >}}`

`{{< /markdown >}} + 		h3. Bootstrap heading
+ {{< markdown >}}`

`{{< /markdown >}} + 		h4. Bootstrap heading
+ {{< markdown >}}`
`{{< /markdown >}} + 		h5. Bootstrap heading
+ {{< markdown >}}`
`{{< /markdown >}} + 		h6. Bootstrap heading
+
## Horizontal rules diff --git a/site/content/docs/5.1/getting-started/browsers-devices.md b/site/content/docs/5.1/getting-started/browsers-devices.md index bdda154a309a..6e0e98f6cc5a 100644 --- a/site/content/docs/5.1/getting-started/browsers-devices.md +++ b/site/content/docs/5.1/getting-started/browsers-devices.md @@ -26,68 +26,23 @@ We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intende Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported. - - - - - - - - - - - - - - - - - - - - - - - - - - -
ChromeFirefoxSafariAndroid Browser & WebView
AndroidSupportedSupported—v6.0+
iOSSupportedSupportedSupported—
+{{< bs-table "table bs-js-table" >}} +| | Chrome | Firefox | Safari | Android Browser & WebView | +| --- | --- | --- | --- | --- | +| **Android** | Supported | Supported | — | v6.0+ | +| **Windows** | Supported | Supported | Supported | — | +{{< /bs-table >}} ### Desktop browsers Similarly, the latest versions of most desktop browsers are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ChromeFirefoxMicrosoft EdgeOperaSafari
MacSupportedSupportedSupportedSupportedSupported
WindowsSupportedSupportedSupportedSupported—
+{{< bs-table "table bs-js-table" >}} +| | Chrome | Firefox | Microsoft Edge | Opera | Safari | +| --- | --- | --- | --- | --- | --- | +| **Mac** | Supported | Supported | Supported | Supported | Supported | +| **Windows** | Supported | Supported | Supported | Supported | — | +{{< /bs-table >}} For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox. diff --git a/site/content/docs/5.1/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md index 07f6bdb9808f..e3130a058b2f 100644 --- a/site/content/docs/5.1/getting-started/contents.md +++ b/site/content/docs/5.1/getting-started/contents.md @@ -68,96 +68,100 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us Bootstrap includes a handful of options for including some or all of our compiled CSS. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CSS filesLayoutContentComponentsUtilities
-
bootstrap.css
-
bootstrap.rtl.css
-
bootstrap.min.css
-
bootstrap.rtl.min.css
- 		IncludedIncludedIncludedIncluded
-
bootstrap-grid.css
-
bootstrap-grid.rtl.css
-
bootstrap-grid.min.css
-
bootstrap-grid.rtl.min.css
- 		}}">Only grid system——}}">Only flex utilities
-
bootstrap-utilities.css
-
bootstrap-utilities.rtl.css
-
bootstrap-utilities.min.css
-
bootstrap-utilities.rtl.min.css
- 		———Included
-
bootstrap-reboot.css
-
bootstrap-reboot.rtl.css
-
bootstrap-reboot.min.css
-
bootstrap-reboot.rtl.min.css
- 		—}}">Only Reboot——
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS filesLayoutContentComponentsUtilities
+
bootstrap.css
+
bootstrap.rtl.css
+
bootstrap.min.css
+
bootstrap.rtl.min.css
+ 		IncludedIncludedIncludedIncluded
+
bootstrap-grid.css
+
bootstrap-grid.rtl.css
+
bootstrap-grid.min.css
+
bootstrap-grid.rtl.min.css
+ 		}}">Only grid system——}}">Only flex utilities
+
bootstrap-utilities.css
+
bootstrap-utilities.rtl.css
+
bootstrap-utilities.min.css
+
bootstrap-utilities.rtl.min.css
+ 		———Included
+
bootstrap-reboot.css
+
bootstrap-reboot.rtl.css
+
bootstrap-reboot.min.css
+
bootstrap-reboot.rtl.min.css
+ 		—}}">Only Reboot——
+
## JS files Similarly, we have options for including some or all of our compiled JavaScript. - - - - - - - - - - - - - - - - - -
JS filesPopper
-
bootstrap.bundle.js
-
bootstrap.bundle.min.js
- 		Included
-
bootstrap.js
-
bootstrap.min.js
- 		—
+
+ + + + + + + + + + + + + + + + + +
JS filesPopper
+
bootstrap.bundle.js
+
bootstrap.bundle.min.js
+ 		Included
+
bootstrap.js
+
bootstrap.min.js
+ 		—
+
## Bootstrap source code diff --git a/site/content/docs/5.1/layout/breakpoints.md b/site/content/docs/5.1/layout/breakpoints.md index 568bbfeebd12..00adab5cc38f 100644 --- a/site/content/docs/5.1/layout/breakpoints.md +++ b/site/content/docs/5.1/layout/breakpoints.md @@ -19,47 +19,17 @@ toc: true Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BreakpointClass infixDimensions
Extra smallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥1400px
+{{< bs-table "table bs-js-table" >}} +| Breakpoint | Class infix | Dimensions | +| --- | --- | --- | +| Extra small | None |<576px | +| Small | `sm` | ≥576px | +| Medium | `md` | ≥768px | +| Large | `lg` | ≥992px | +| Extra large | `xl` | ≥1200px | +| Extra extra large | xxl | ≥1400px | +{{< /bs-table >}} + Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. diff --git a/site/content/docs/5.1/layout/containers.md b/site/content/docs/5.1/layout/containers.md index 456225b942b5..cd2ecab17f12 100644 --- a/site/content/docs/5.1/layout/containers.md +++ b/site/content/docs/5.1/layout/containers.md @@ -20,102 +20,104 @@ 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 -
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px
.container-fluid100%100%100%100%100%100%
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Extra small
+ <576px + 		+ Small
+ ≥576px + 		+ Medium
+ ≥768px + 		+ Large
+ ≥992px + 		+ X-Large
+ ≥1200px + 		+ XX-Large
+ ≥1400px +
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px
.container-fluid100%100%100%100%100%100%
+
## Default container