Bootstrap 5 (currently in Alpha) drops support for Internet Explorer 11, but you can add support back by simply adding a CSS file and a few JavaScript polyfills.
Just add this in the <head> which will load the CSS and JS - just for IE users.
<script>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"><\/script><script>!function () { var e, t; ((e = document.createEvent("CustomEvent")).initEvent("Bootstrap", !0, !0), e.preventDefault(), e.defaultPrevented) || (t = Event.prototype.preventDefault, Event.prototype.preventDefault = function () { this.cancelable && (t.call(this), Object.defineProperty(this, "defaultPrevented", { get: function () { return !0 }, configurable: !0 })) }) }();<\/script>');</script>
- Polyfill for CSS variables courtesy of ie11CustomProperties
- Workaround for the SVG overflow bug
- Remove the default vertical scrollbar from
textarea - Fixes for card image size bug
- Fixes for modals (
.modal-dialog-centeredand.modal-dialog-scrollable) - Fixes for navbars (using flex for
.navbar-collapse) - Adds -ms- vendor prefixes for grid layout utilities (
.align-self-auto,.align-self-centerand.align-self-stretch)
- Internet Explorer 11 does not support vertical alignment of flex items when the flex container has a
min-height. See Flexbugs #3 for more details. - View a list of known issues at https://github.com/coliff/bootstrap-ie11/issues
See this in action at: https://v5-bootstrap.christianoliff.com/
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers