Bootstrap 5 for Internet Explorer 11

2 min readDec 10, 2020

Bootstrap 5 (currently in Beta) drops support for IE 11, but with ‘bootstrap-ie11’ you can add support back.

This automatically fixes all CSS issues and adds full JS compatibility with just 1 line of code (a custom stylesheet and two JavaScript polyfills).

Quick start

Download the latest release
Clone the repo git clone https://github.com/coliff/bootstrap-ie11.git
Install with npm npm install bootstrap-ie11
Install with yarn yarn add 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/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find,Number.parseFloat%2CNumber.parse"><\/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.0.0-beta1/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">

What does this fix/polyfill?

Polyfill for CSS custom properties (ie11CustomProperties)
Polyfill to fix all Bootstrap JavaScript components (Polyfill.io)
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
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

How can I test this?

Microsoft offers free Windows 7/8.1 VMs with IE11
BrowserStack also has IE11 for testing

Demo

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