bootstrap-ie11
Advanced tools
Bootstrap 5 drops support for Internet Explorer 11, but you can add support back by simply adding a CSS file and a few JavaScript polyfills.
git clone https://github.com/coliff/bootstrap-ie11.gitnpm install bootstrap-ie11yarn add bootstrap-ie11composer require coliff/bootstrap-ie11Just add this in the <head> which will load the CSS and JS - just for IE users.
<script nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js,npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');</script>
If you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use an IE-only media query as follow:
<link rel="stylesheet" href="/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
The CSS can be loaded via a CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.5/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">
document.write MethodTo enhance the maintainability and readability of your HTML, you can split the document.write method when adding Bootstrap 5 and necessary polyfills for Internet Explorer 11. Below is an example of how you can split the document.write method:
<script nomodule>
window.MSInputMethodContext && document.documentMode &&
document.write(
'<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.5/css/bootstrap-ie11.min.css">'
+ '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"><\/script>'
+ '<script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@4.1.0"><\/script>'
+ '<script src="https://cdn.jsdelivr.net/npm/element-qsa-scope@1.1.0"><\/script>'
+ '<script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>'
);
</script>
For environments where you need local copies of the dependencies, follow these steps to download and reference them locally:
src attribute of the <script> tag into the browser's URI bar and hit enter, the response will be whatever your app would receiveAfter downloading the dependencies, update your script to reference these local files:
<script nomodule>
window.MSInputMethodContext && document.documentMode &&
document.write(
'<link rel="stylesheet" href="css/bootstrap-ie11.min.css">'
+ '<script src="js/bootstrap.bundle.min.js"><\/script>'
+ '<script src="js/ie11CustomProperties.js"><\/script>'
+ '<script src="js/elementQsaScope.js"><\/script>'
+ '<script src="js/polyfill.js"><\/script>'
);
</script>
If Internet Explorer is running in Compatibility Mode, it'll behave like an earlier version which could prevent bootstrap-ie11 from working properly. To ensure Internet Explorer 11 does not run your site in compatibility mode, add the following meta tag to your page:
<meta http-equiv="x-ua-compatible" content="ie=edge">
textarealegendprejustify-content-evenly flex utilitytemplate and main.modal-dialog-centered and .modal-dialog-scrollable)btn-close-white SVG icon colorvalid-tooltip & invalid-tooltip positioninguser-select-auto and user-select-none utilities.visually-hidden utility class.vr classmin-height. See Flexbugs #3 for more details.!important from any CSS variables with that set. See ie11CustomProperties issue #62..img-fluid are sometimes disproportionately sized. To fix this, add width: 100%; or .w-100 where necessary. This fix improperly sizes other image formats, so this isn't applied automatically.body{font-family:"Segoe UI", Arial, sans-serif;} to your IE11-only style sheet so there isn't a delay in the text displaying.See this in action at: https://coliff.github.io/bootstrap-ie11/tests/
Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers
FAQs
Bootstrap 5 for Internet Explorer 11
We found that bootstrap-ie11 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.