bootstrap-ie11

Bootstrap 5 for IE 11

Bootstrap 5 for IE 11

LICENSE GitHub Super-Linter GitHub stars image NPM Version jsdelivr

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

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.3/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.3/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:

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?

Known Issues

Demo

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

Thanks

BrowserStack Logo

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