JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 939
  • Score
    100M100P100Q107725F
  • License MIT

Bootstrap 5 for Internet Explorer 11

Package Exports

  • bootstrap-ie11

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

  • 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
  • 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.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/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
  • 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.io)
  • Polyfill to fix tabs (element-qsa-scope polyfill)

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

How can I test this?

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