bootstrap-ie11
v5.3.3
Published
Bootstrap 5 for Internet Explorer 11
Downloads
3,817
Maintainers
Readme
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 <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/[email protected]/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/[email protected]/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
andmain
- 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
anduser-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
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, addwidth: 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