bootstrap-ie11

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 which will load the CSS and JS - just for IE users.

``html

`

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

`html

`

The CSS can be loaded via a CDN:

`html

`

$3

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:

`html

`

$3

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
`

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:

`html

`

FAQS

$3

- 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

$3

- 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