Bug reports must include:
-- Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile)
-- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
+- Operating system and version (Windows, macOS, Android, iOS)
+- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
- [Reduced test case](https://css-tricks.com/reduced-test-cases/) and suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
Bug reports must include:
-- Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile)
-- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
+- Operating system and version (Windows, macOS, Android, iOS)
+- Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)
- [Reduced test case](https://css-tricks.com/reduced-test-cases/) and suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/)
'The “month” input type is not supported in all browsers.*',
'The “color” input type is not supported in all browsers.*',
'The “datetime-local” input type is not supported in all browsers.*',
- 'The “time” input type is not supported in all browsers.*',
- // IE11 doesn't recognize <main> / give the element an implicit "main" landmark.
- // Explicit role="main" is redundant for other modern browsers, but still valid.
- 'The “main” role is unnecessary for element “main”.'
+ 'The “time” input type is not supported in all browsers.*'
].join('|')
const args = [
it('should enforce focus', done => {
fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
- const isIE11 = Boolean(window.MSInputMethodContext) && Boolean(document.documentMode)
const modalEl = fixtureEl.querySelector('.modal')
const modal = new Modal(modalEl)
modalEl.addEventListener('shown.bs.modal', () => {
expect(modal._enforceFocus).toHaveBeenCalled()
- if (isIE11) {
- done()
- return
- }
-
spyOn(modal._element, 'focus')
document.addEventListener('focusin', focusInListener)
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
- // Workaround for the image size bug in IE
- // See: https://github.com/twbs/bootstrap/pull/28855
- min-height: 1px;
padding: $card-spacer-y $card-spacer-x;
color: $card-color;
}
@include box-shadow($input-box-shadow);
@include transition($input-transition);
- // Unstyle the caret on `<select>`s in IE10+.
- &::-ms-expand {
- background-color: transparent;
- border: 0;
- }
-
// Customize the `:focus` state to imitate native WebKit styles.
&:focus {
color: $input-focus-color;
margin: 0;
opacity: 0;
- // Separate rules for :focus and :focus-within as IE doesn't support the latter, and
- // thus ignores the entire ruleset. See https://github.com/twbs/bootstrap/pull/29036.
- &:focus ~ .form-file-label {
- border-color: $form-file-focus-border-color;
- box-shadow: $form-file-focus-box-shadow;
- }
-
&:focus-within ~ .form-file-label {
border-color: $form-file-focus-border-color;
box-shadow: $form-file-focus-box-shadow;
border-color: $form-select-disabled-border-color;
}
- // Hides the default caret in IE11
- &::-ms-expand {
- display: none;
- }
-
// Remove outline from select box in FF
&:-moz-focusring {
color: transparent;
</div>
</header>
-<main role="main">
+<main>
<section class="py-5 text-center container">
<div class="row py-lg-5">
</div>
</div>
-<main role="main" class="container">
+<main class="container">
<div class="row">
<div class="col-md-8 blog-main">
<h3 class="pb-4 mb-4 font-italic border-bottom">
</nav>
</header>
-<main role="main">
+<main>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
</div>
</header>
- <main role="main" class="px-3">
+ <main class="px-3">
<h1>Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
</div>
</nav>
- <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
+ <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
color: #777;
}
}
-
-/* Fallback for IE
--------------------------------------------------- */
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- .form-label-group > label {
- display: none;
- }
- .form-label-group input:-ms-input-placeholder {
- color: #777;
- }
-}
</div>
</nav>
-<main role="main" class="container">
+<main class="container">
<div class="bg-light p-5 rounded">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
</div>
</nav>
-<main role="main" class="container">
+<main class="container">
<div class="bg-light p-5 rounded">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
</div>
</nav>
- <main role="main">
+ <main>
<div class="bg-light p-5 rounded">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
</nav>
</div>
-<main role="main" class="container">
+<main class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
<img class="mr-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-1">
</div>
</nav>
-<main role="main" class="container">
+<main class="container">
<div class="starter-template text-center py-5 px-3">
<h1>Bootstrap starter template</h1>
</header>
<!-- Begin page content -->
-<main role="main" class="flex-shrink-0">
+<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main > .container</code>.</p>
---
<!-- Begin page content -->
-<main role="main" class="flex-shrink-0">
+<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky footer</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
## Color
-Keep in mind color inputs are [not supported in IE](https://caniuse.com/#feat=input-color).
-
{{< example >}}
<form>
<label for="exampleColorInput">Color picker</label>
## Supported browsers
-Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 11 / Microsoft Edge**.
+Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support 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.
<th></th>
<th>Chrome</th>
<th>Firefox</th>
- <th>Internet Explorer</th>
<th>Microsoft Edge</th>
<th>Opera</th>
<th>Safari</th>
<th scope="row">Mac</th>
<td>Supported</td>
<td>Supported</td>
- <td class="text-muted">—</td>
<td>Supported</td>
<td>Supported</td>
<td>Supported</td>
<th scope="row">Windows</th>
<td>Supported</td>
<td>Supported</td>
- <td>IE11 only</td>
<td>Supported</td>
<td>Supported</td>
<td class="text-muted">—</td>
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/organizations/#faq) version of Firefox.
-Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.
+Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, and Firefox for Linux, though they are not officially supported.
## Internet Explorer
-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 Internet Explorer, 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 IE10 support, use Bootstrap 4.**
+Internet Explorer is not supported. **If you require Internet Explorer support, please use Bootstrap v4.**
## Modals and dropdowns on mobile
}
})
{{< /highlight >}}
-
-## Compatibility with IE 11
-
-Bootstrap v5 isn't designed to work with Internet Explorer 11, but you can add the following polyfills to make it work:
-
-{{< highlight html >}}
-<!-- Polyfill.io will load polyfills your browser needs -->
-<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
-<script>
- // Fix preventDefault for IE
- (function () {
- var workingDefaultPrevented = (function () {
- var e = document.createEvent('CustomEvent')
- e.initEvent('Bootstrap', true, true)
- e.preventDefault()
- return e.defaultPrevented
- })()
-
- if (!workingDefaultPrevented) {
- var origPreventDefault = Event.prototype.preventDefault
- Event.prototype.preventDefault = function () {
- if (!this.cancelable) {
- return
- }
-
- origPreventDefault.call(this)
- Object.defineProperty(this, 'defaultPrevented', {
- get: function () {
- return true
- },
- configurable: true
- })
- }
- }
- })()
-</script>
-{{< /highlight >}}
#### Escape SVG
-We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. These characters need to be escaped to properly render the background images in IE.
+We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images.
#### Add and Subtract functions
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
-**IE11 and IE10 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that can render it properly.
-
{{< highlight html >}}
<div class="sticky-top">...</div>
{{< /highlight >}}
## Alignment
-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)
+Use flexbox alignment utilities to vertically and horizontally align columns.
### Vertical alignment
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 Internet Explorer 10 and 11
- Dropped support for Firefox NN - MM
- Dropped support for Safari NN
- Dropped support for iOS Safari NN
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).
-**Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details.
-
{{< example >}}
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
{{ partial "docs-navbar" . }}
- <main class="my-auto p-5" id="content" role="main">
+ <main class="my-auto p-5" id="content">
{{ .Content }}
</main>
{{ partial "docs-sidebar" . }}
</div>
- <main class="col-md-9 py-md-3 pl-md-5 bd-content" role="main">
+ <main class="col-md-9 py-md-3 pl-md-5 bd-content">
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ partial "ads" . }}
</div>
</header>
- <main class="bd-content py-5" id="content" role="main">
+ <main class="bd-content py-5" id="content">
<div class="container">
{{ .Content }}
</div>
##### Date & color input support
-Keep in mind date inputs are [not fully supported](https://caniuse.com/#feat=input-datetime) by IE and Safari. Color inputs also [lack support](https://caniuse.com/#feat=input-color) on IE.
+Keep in mind date inputs are [not fully supported](https://caniuse.com/#feat=input-datetime) by all browsers, namely Safari.
-<main class="bd-masthead mb-3 mb-md-5 border-bottom" id="content" role="main">
+<main class="bd-masthead mb-3 mb-md-5 border-bottom" id="content">
<div class="container">
<div class="row">
<div class="col-6 mx-auto col-md-4 order-md-2 col-lg-5">
projects / thirdparty / bootstrap.git / commitdiff
