Bootstrap 5 for IE11

Posted on

Bootstrap 5 drops support for Internet Explorer 10 & 11. Worldwide desktop browser marketshare for IE 11 continues to steadily decline but still accounts for 1.9% based on StatCounter GlobalStats for March, 2021 ).

I’ve created a polyfill solution so you can add support back by simply adding a CSS file and a few JavaScript polyfills.

Usage

Add this in the which will load the ‘bootstrap-ie11’ CSS and JS polyfills - 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.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>');</script>

Bootstrap 5 on Internet Explorer 11

If you’d prefer to load the bootstrap-ie11 CSS without JavaScript you could use an IE-only media query as follows:

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

FAQS

What does this fix/polyfill?

  • 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
  • Fix for .visually-hidden utility 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.io )
  • Polyfill to fix tabs (element-qsa-scope polyfill )

Any other things to look out for?

  • 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 stylesheet so there isn’t a delay in the text displaying.
  • View a list of known issues at https://github.com/coliff/bootstrap-ie11/issues .
  • The ‘offcanvas ’ component’s JavaScript is not working.

How can I test this?

Demo

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

You might also like

Bootstrap 5 Print Stylesheet

Optimized CSS for printing