JSPM – bootstrap-ie11@5.3.7

Package Exports

bootstrap-ie11
bootstrap-ie11/css/bootstrap-ie11.min.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bootstrap-ie11) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Bootstrap 5 for IE 11

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.

Quick start

Download the latest release
Clone the repository git clone https://github.com/coliff/bootstrap-ie11.git
Install with npm npm install bootstrap-ie11
Install with Yarn yarn add bootstrap-ie11
Install with Composer composer require coliff/bootstrap-ie11

Usage

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.7/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">

Splitting the `document.write` Method

To 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.7/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>

Getting local copies of dependencies

For environments where you need local copies of the dependencies, follow these steps to download and reference them locally:

Bootstrap CSS - download the .css and corresponding .map files
Bootstrap JS - download the .js and corresponding .map files
IE11 Custom Properties
Element QSA Scope
PolyFill - this seems to load dynamically based on what functionality the browser making the requests is missing, here's what I did as a workaround:
1. Open IE11 or Edge in IE11 mode (search "IE mode" in Edge settings to find and enable)
2. Copy/paste the URI in the src attribute of the <script> tag into the browser's URI bar and hit enter, the response will be whatever your app would receive
3. Copy/paste the text on the page and save it to a new file, now you have a local copy

After 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>

Forcing IE11 Out of Compatibility Mode

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">

FAQS

What does this fix/polyfill?

Grid flexbug workaround
Workaround for the SVG overflow bug
Remove the default vertical scrollbar from textarea
Correct the text-wrapping and color inheritance for legend
Disable auto-hiding scrollbar to avoid overlap on pre
Fixes for card image size bug
Fixes for text color and text opacity utility classes
Improved layout for justify-content-evenly flex utility
Fixes for stacks gap spacing
Add the correct display values for template and main
Fixes for modals (.modal-dialog-centered and .modal-dialog-scrollable)
Fixes for forms (inputs, checkboxes, radio buttons, switches, selects, ranges, placeholders and floating labels)
Fix for the btn-close-white SVG icon color
Fix for dark carousel previous and next SVG icon colors
Fix for valid-tooltip & invalid-tooltip positioning
Adds vendor prefixes for user-select-auto and user-select-none utilities
Fix for .visually-hidden utility class
Fix for vertical rule .vr class
Bootstrap 5 Beta 2 is loaded via CDN (The JavaScript in Bootstrap 5 Beta 3 and later is incompatible)
Polyfill for CSS custom properties (ie11CustomProperties)
Polyfill to fix most JavaScript components (Polyfill)
Polyfill to fix tabs (element-qsa-scope polyfill)
Fixes for Accordion button icons
Fix for border utility classes

Known Issues

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.
The ie11CustomProperties polyfill currently removes the !important from any CSS variables with that set. See ie11CustomProperties issue #62.
SVG images with .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.
There is a slight delay before the ie11CustomProperties polyfill works its magic. Consider adding body{font-family:"Segoe UI", Arial, sans-serif;} to your IE11-only style sheet so there isn't a delay in the text displaying.
View a list of known issues at https://github.com/coliff/bootstrap-ie11/issues.
From Bootstrap 5.2 onwards, CSS custom properties are used extensively which can cause issues with the ie11CustomProperties polyfill.

Demo

See this in action at: https://coliff.github.io/bootstrap-ie11/tests/

Thanks

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers

bootstrap-ie11