
Product
Introducing Repository Labels and Security Policies
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
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.git
npm install bootstrap-ie11
yarn add bootstrap-ie11
composer require coliff/bootstrap-ie11
Just 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">
textarea
legend
pre
justify-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.
Product
Socket is introducing a new way to organize repositories and apply repository-specific security policies.
Research
Security News
Socket researchers uncovered malicious npm and PyPI packages that steal crypto wallet credentials using Google Analytics and Telegram for exfiltration.
Product
Socket now supports .NET, bringing supply chain security and SBOM accuracy to NuGet and MSBuild-powered C# projects.