v5: drop Internet Explorer support

.browserslistrc

@@ -6,8 +6,8 @@ not dead
 Chrome >= 60
 Firefox >= 60
 Edge >= 16.16299
-Explorer 11
 iOS >= 10
 Safari >= 10
 Android >= 6
+not Explorer <= 11
 not ExplorerMobile <= 11

.github/ISSUE_TEMPLATE/bug.md

@@ -6,6 +6,6 @@ Before opening:
 
 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/)

.github/ISSUE_TEMPLATE/bug_report.md

@@ -12,6 +12,6 @@ Before opening:
 
 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/)

build/vnu-jar.js

@@ -37,10 +37,7 @@ childProcess.exec('java -version', (error, stdout, stderr) => {
     '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 = [

js/src/dom/event-handler.js

@@ -6,7 +6,7 @@
  */
 
 import { getjQuery } from '../util/index'
-import { createCustomEvent, defaultPreventedPreservedOnDispatch } from './polyfill'
+import { defaultPreventedPreservedOnDispatch } from './polyfill'
 
 /**
  * ------------------------------------------------------------------------
@@ -307,7 +307,7 @@ const EventHandler = {
       evt = document.createEvent('HTMLEvents')
       evt.initEvent(typeEvent, bubbles, true)
     } else {
-      evt = createCustomEvent(event, {
+      evt = new CustomEvent(event, {
         bubbles,
         cancelable: true
       })

js/src/dom/polyfill.js

@@ -9,55 +9,12 @@
 
 import { getUID } from '../util/index'
 
-let { matches, closest } = Element.prototype
 let find = Element.prototype.querySelectorAll
 let findOne = Element.prototype.querySelector
-let createCustomEvent = (eventName, params) => {
-  const cEvent = new CustomEvent(eventName, params)
-
-  return cEvent
-}
-
-if (typeof window.CustomEvent !== 'function') {
-  createCustomEvent = (eventName, params) => {
-    params = params || { bubbles: false, cancelable: false, detail: null }
-
-    const evt = document.createEvent('CustomEvent')
-
-    evt.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail)
-    return evt
-  }
-}
-
-const workingDefaultPrevented = (() => {
-  const e = document.createEvent('CustomEvent')
-
-  e.initEvent('Bootstrap', true, true)
-  e.preventDefault()
-  return e.defaultPrevented
-})()
-
-if (!workingDefaultPrevented) {
-  const origPreventDefault = Event.prototype.preventDefault
-
-  Event.prototype.preventDefault = function () {
-    if (!this.cancelable) {
-      return
-    }
-
-    origPreventDefault.call(this)
-    Object.defineProperty(this, 'defaultPrevented', {
-      get() {
-        return true
-      },
-      configurable: true
-    })
-  }
-}
 
 // MSEdge resets defaultPrevented flag upon dispatchEvent call if at least one listener is attached
 const defaultPreventedPreservedOnDispatch = (() => {
-  const e = createCustomEvent('Bootstrap', {
+  const e = new CustomEvent('Bootstrap', {
     cancelable: true
   })
 
@@ -69,26 +26,6 @@ const defaultPreventedPreservedOnDispatch = (() => {
   return e.defaultPrevented
 })()
 
-if (!matches) {
-  matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector
-}
-
-if (!closest) {
-  closest = function (selector) {
-    let element = this
-
-    do {
-      if (matches.call(element, selector)) {
-        return element
-      }
-
-      element = element.parentElement || element.parentNode
-    } while (element !== null && element.nodeType === 1)
-
-    return null
-  }
-}
-
 const scopeSelectorRegex = /:scope\b/
 const supportScopeQuery = (() => {
   const element = document.createElement('div')
@@ -143,10 +80,7 @@ if (!supportScopeQuery) {
 }
 
 export {
-  createCustomEvent,
   find,
   findOne,
-  matches,
-  closest,
   defaultPreventedPreservedOnDispatch
 }

js/src/dom/selector-engine.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import { find as findFn, findOne, matches, closest } from './polyfill'
+import { find as findFn, findOne } from './polyfill'
 import { makeArray } from '../util/index'
 
 /**
@@ -18,7 +18,7 @@ const NODE_TEXT = 3
 
 const SelectorEngine = {
   matches(element, selector) {
-    return matches.call(element, selector)
+    return element.matches(selector)
   },
 
   find(selector, element = document.documentElement) {
@@ -52,7 +52,7 @@ const SelectorEngine = {
   },
 
   closest(element, selector) {
-    return closest.call(element, selector)
+    return element.closest(selector)
   },
 
   prev(element, selector) {

js/src/util/index.js

@@ -87,10 +87,7 @@ const getTransitionDurationFromElement = element => {
 }
 
 const triggerTransitionEnd = element => {
-  const evt = document.createEvent('HTMLEvents')
-
-  evt.initEvent(TRANSITION_END, true, true)
-  element.dispatchEvent(evt)
+  element.dispatchEvent(new Event(TRANSITION_END))
 }
 
 const isElement = obj => (obj[0] || obj).nodeType

js/tests/browsers.js

@@ -30,13 +30,6 @@ const browsers = {
     browser: 'Edge',
     browser_version: 'latest'
   },
-  ie11Win10: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'IE',
-    browser_version: '11.0'
-  },
   chromeWin10: {
     base: 'BrowserStack',
     os: 'Windows',

js/tests/unit/modal.spec.js

@@ -653,7 +653,6 @@ describe('Modal', () => {
     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)
 
@@ -668,11 +667,6 @@ describe('Modal', () => {
       modalEl.addEventListener('shown.bs.modal', () => {
         expect(modal._enforceFocus).toHaveBeenCalled()
 
-        if (isIE11) {
-          done()
-          return
-        }
-
         spyOn(modal._element, 'focus')
 
         document.addEventListener('focusin', focusInListener)

package.json

@@ -37,9 +37,9 @@
     "js-compile-plugins": "node build/build-plugins.js",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
     "js-minify": "npm-run-all --parallel js-minify-*",
-    "js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
+    "js-minify-standalone": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
-    "js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
+    "js-minify-bundle": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
     "js-test": "npm-run-all --parallel js-test-karma js-test-integration",
     "js-debug": "cross-env DEBUG=true karma start js/tests/karma.conf.js",
     "js-test-karma": "karma start js/tests/karma.conf.js",

scss/_breadcrumb.scss

@@ -17,27 +17,13 @@
     padding-left: $breadcrumb-item-padding-x;
 
     &::before {
-      display: inline-block; // Suppress underlining of the separator in modern browsers
+      display: inline-block; // Suppress underlining of the separator
       padding-right: $breadcrumb-item-padding-x;
       color: $breadcrumb-divider-color;
       content: escape-svg($breadcrumb-divider);
     }
   }
 
-  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
-  // without `<ul>`s. The `::before` pseudo-element generates an element
-  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
-  //
-  // To trick IE into suppressing the underline, we give the pseudo-element an
-  // underline and then immediately remove it.
-  + .breadcrumb-item:hover::before {
-    text-decoration: underline;
-  }
-  // stylelint-disable-next-line no-duplicate-selectors
-  + .breadcrumb-item:hover::before {
-    text-decoration: none;
-  }
-
   &.active {
     color: $breadcrumb-active-color;
   }

scss/_card.scss

@@ -36,9 +36,6 @@
   // 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;
 }
@@ -135,7 +132,6 @@
 .card-img,
 .card-img-top,
 .card-img-bottom {
-  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 }
 

scss/_modal.scss

@@ -56,11 +56,9 @@
 }
 
 .modal-dialog-scrollable {
-  display: flex; // IE10/11
   max-height: subtract(100%, $modal-dialog-margin * 2);
 
   .modal-content {
-    max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
     overflow: hidden;
   }
 
@@ -78,29 +76,6 @@
   display: flex;
   align-items: center;
   min-height: subtract(100%, $modal-dialog-margin * 2);
-
-  // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
-  &::before {
-    display: block; // IE10
-    height: subtract(100vh, $modal-dialog-margin * 2);
-    height: min-content; // Reset height to 0 except on IE
-    content: "";
-  }
-
-  // Ensure `.modal-body` shows scrollbar (IE10/11)
-  &.modal-dialog-scrollable {
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-
-    .modal-content {
-      max-height: none;
-    }
-
-    &::before {
-      content: none;
-    }
-  }
 }
 
 // Actual modal
@@ -206,19 +181,10 @@
 
   .modal-dialog-scrollable {
     max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
-
-    .modal-content {
-      max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
-    }
   }
 
   .modal-dialog-centered {
     min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
-
-    &::before {
-      height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
-      height: min-content;
-    }
   }
 
   .modal-content {

scss/_navbar.scss

@@ -107,10 +107,10 @@
 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
 // on the `.navbar` parent.
 .navbar-collapse {
-  flex: 1 0 100%;
   // For always expanded or extra full navbars, ensure content aligns itself
   // properly vertically. Can be easily overridden with flex utilities.
   align-items: center;
+  width: 100%;
 }
 
 // Button for toggling the navbar when in its collapsed state
@@ -173,9 +173,6 @@
 
         .navbar-collapse {
           display: flex !important; // stylelint-disable-line declaration-no-important
-
-          // Changes flex-bases to auto because of an IE10 bug
-          flex-basis: auto;
         }
 
         .navbar-toggler {