@@ -702,7 +702,13 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
{{<calloutwarning>}}
##### Caveat with anchors
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`.
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{<docsref"/components/buttons#disabled-state">}}) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Internet Explorer 10, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
{{</callout>}}
{{<calloutdanger>}}
#### Cross-browser compatibility
While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
{{</callout>}}
## Validation
...
...
@@ -1255,7 +1261,7 @@ As is the `size` attribute:
### Range
Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
@@ -22,6 +22,14 @@ Below is an example of a single media object. Only two classes are required—th
</div>
{{</example>}}
{{<calloutwarning>}}
##### Flexbug #12: Inline elements aren't treated as flex items
Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{<docsref"/utilities/display">}}), as an easy fix.
**Source:**[Flexbugs on GitHub](https://github.com/philipwalton/flexbugs#flexbug-12)
{{</callout>}}
## Nesting
Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object.
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we only support Microsoft Edge**.
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 11 / Microsoft Edge**.
Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
...
...
@@ -93,7 +93,7 @@ Similarly, the latest versions of most desktop browsers are supported.
<thscope="row">Windows</th>
<tdclass="text-success">Supported</td>
<tdclass="text-success">Supported</td>
<tdclass="text-danger">Not supported</td>
<tdclass="text-success">Supported, IE11</td>
<tdclass="text-success">Supported</td>
<tdclass="text-success">Supported</td>
<tdclass="text-danger">Not supported</td>
...
...
@@ -109,7 +109,7 @@ For a list of some of the browser bugs that Bootstrap has to grapple with, see o
## Internet Explorer
Internet Explorer 11 is not supported officially. However, if you build Bootstrap yourself, you can add the needed CSS prefixes and follow the instructions on the [JavaScript page]({{<docsref"/getting-started/javascript#compatibility-with-ie-11">}}). Please note that this might break at any time. **If you require Internet Explorer 10/11 support, use Bootstrap 4.**
Internet Explorer 11 is supported; IE10 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](https://caniuse.com/) for details on browser support of CSS3 and HTML5 features. **If you require IE8-9 support, use Bootstrap 3.**
@@ -340,7 +340,7 @@ Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoi
## Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Use flexbox alignment utilities to vertically and horizontally align columns.**Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.**[See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)
