PHPackages coliff/bootstrap-ie11 - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. coliff/bootstrap-ie11 ActiveLibrary[Utility & Helpers](/categories/utility) coliff/bootstrap-ie11 ===================== Bootstrap 5 for Internet Explorer 11 v5.3.7(8mo ago)96730↓50%15[1 issues](https://github.com/coliff/bootstrap-ie11/issues)MITHTMLCI passing Since Feb 11Pushed 1mo ago2 watchersCompare [ Source](https://github.com/coliff/bootstrap-ie11)[ Packagist](https://packagist.org/packages/coliff/bootstrap-ie11)[ Docs](https://github.com/coliff/bootstrap-ie11#readme)[ Fund](https://paypal.me/coliff)[ RSS](/packages/coliff-bootstrap-ie11/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)DependenciesVersions (29)Used By (0) [![Bootstrap 5 for IE 11](https://repository-images.githubusercontent.com/171514859/420fd400-c07d-11ea-90cb-58dfe1d8a3f3)](https://repository-images.githubusercontent.com/171514859/420fd400-c07d-11ea-90cb-58dfe1d8a3f3) ### Bootstrap 5 for IE 11 [](#bootstrap-5-for-ie-11) [![LICENSE: MIT](https://camo.githubusercontent.com/891419a00e04aa0e311068fa8a04eec92cab4f7026c76278279bf2a1da50e578/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d6c69676874677265792e737667)](https://raw.githubusercontent.com/coliff/bootstrap-ie11/main/LICENSE)[![GitHub Super-Linter](https://github.com/coliff/bootstrap-ie11/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)[![GitHub stars image](https://camo.githubusercontent.com/037da81f84a4f1455eadbb7695318c1becc6ba435018d82d4a882f10911b8933/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f636f6c6966662f626f6f7473747261702d696531312e7376673f6c6162656c3d4769744875622532305374617273)](https://github.com/coliff/bootstrap-ie11)[![npm Version](https://camo.githubusercontent.com/e1ce57f6896f9996229f58407193b386b1a2be1d837bcc0852801356608f5d77/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626f6f7473747261702d69653131)](https://www.npmjs.com/package/bootstrap-ie11)[![jsdelivr](https://camo.githubusercontent.com/68cecfb489a503b94308332a9404023e2cc3f0947b4d6778d427bdc06054a9a8/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f626f6f7473747261702d696531312f6261646765)](https://www.jsdelivr.com/package/npm/bootstrap-ie11) [Bootstrap 5](https://getbootstrap.com/) 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 ----------- [](#quick-start) - Download the [latest release](https://github.com/coliff/bootstrap-ie11) - Clone the repository `git clone https://github.com/coliff/bootstrap-ie11.git` - Install with [npm](https://www.npmjs.com/package/bootstrap-ie11) `npm install bootstrap-ie11` - Install with [Yarn](https://classic.yarnpkg.com/en/package/bootstrap-ie11) `yarn add bootstrap-ie11` - Install with [Composer](https://packagist.org/packages/coliff/bootstrap-ie11) `composer require coliff/bootstrap-ie11` Usage ----- [](#usage) Just add this in the `` which will load the CSS and JS - just for IE users. ``` window.MSInputMethodContext && document.documentMode && document.write(''); ``` If you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use an IE-only media query as follow: ``` ``` The CSS can be loaded via a CDN: ``` ``` ### Splitting the `document.write` Method [](#splitting-the-documentwrite-method) 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: ``` window.MSInputMethodContext && document.documentMode && document.write( '' + '' + '' + '' + '' ); ``` ### Getting local copies of dependencies [](#getting-local-copies-of-dependencies) For environments where you need local copies of the dependencies, follow these steps to download and reference them locally: - [Bootstrap CSS](https://github.com/twbs/bootstrap/tree/v5.0.0-beta2/dist/css) - download the .css and corresponding .map files - [Bootstrap JS](https://github.com/twbs/bootstrap/tree/v5.0.0-beta2/dist/js) - download the .js and corresponding .map files - [IE11 Custom Properties](https://github.com/nuxodin/ie11CustomProperties/blob/master/ie11CustomProperties.js) - [Element QSA Scope](https://github.com/jonathantneal/element-qsa-scope/blob/master/index.js) - 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 `` tag into the browser's URI bar and hit enter, the response will be whatever your app would receive 3. Copy/paste the text on the page and save it to a new file, now you have a local copy After downloading the dependencies, update your script to reference these local files: ``` window.MSInputMethodContext && document.documentMode && document.write( '' + '' + '' + '' + '' ); ``` Forcing IE11 Out of Compatibility Mode -------------------------------------- [](#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: ``` ``` FAQS ---- [](#faqs) ### What does this fix/polyfill? [](#what-does-this-fixpolyfill) - 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](https://github.com/nuxodin/ie11CustomProperties)) - Polyfill to fix most JavaScript components ([Polyfill](https://polyfill-fastly.io/v3/)) - Polyfill to fix tabs ([element-qsa-scope polyfill](https://www.npmjs.com/package/element-qsa-scope)) - Fixes for Accordion button icons - Fix for border utility classes ### Known Issues [](#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.](https://github.com/philipwalton/flexbugs#flexbug-3) - The ie11CustomProperties polyfill currently removes the `!important` from any CSS variables with that set. See [ie11CustomProperties issue #62](https://github.com/nuxodin/ie11CustomProperties/issues/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 . - From Bootstrap 5.2 onwards, CSS custom properties are used extensively which can cause issues with the ie11CustomProperties polyfill. Demo ---- [](#demo) See this in action at: Thanks ------ [](#thanks) [ ![BrowserStack Logo](https://camo.githubusercontent.com/941d167418955d863ee5cb7b8e030514ab8bf23b2ffed99c298ce156741b7ca9/68747470733a2f2f6c6976652e62726f77736572737461636b2e636f6d2f696d616765732f6f70656e736f757263652f62726f77736572737461636b2d6c6f676f2e737667)](https://www.browserstack.com/)Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers ### Health Score 51 — FairBetter than 96% of packages Maintenance76 Regular maintenance activity Popularity33 Limited adoption so far Community20 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 64% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~83 days Recently: every ~131 days Total 21 Last Release 251d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a6068e9ba0ce8defec6b107f1cc3b99c2fd91f75298b48f71cc3dbfdc20870a8?d=identicon)[coliff](/maintainers/coliff) --- Top Contributors [![coliff](https://avatars.githubusercontent.com/u/1212885?v=4)](https://github.com/coliff "coliff (259 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (137 commits)")[![vltansky](https://avatars.githubusercontent.com/u/5851280?v=4)](https://github.com/vltansky "vltansky (2 commits)")[![Claude](https://avatars.githubusercontent.com/in/2246796?v=4)](https://github.com/Claude "Claude (1 commits)")[![marispro](https://avatars.githubusercontent.com/u/5610414?v=4)](https://github.com/marispro "marispro (1 commits)")[![Re-Fish](https://avatars.githubusercontent.com/u/52908547?v=4)](https://github.com/Re-Fish "Re-Fish (1 commits)")[![step-security-bot](https://avatars.githubusercontent.com/u/89328645?v=4)](https://github.com/step-security-bot "step-security-bot (1 commits)")[![lgtm-com[bot]](https://avatars.githubusercontent.com/in/17324?v=4)](https://github.com/lgtm-com[bot] "lgtm-com[bot] (1 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (1 commits)")[![JMHeartley](https://avatars.githubusercontent.com/u/67245523?v=4)](https://github.com/JMHeartley "JMHeartley (1 commits)") --- Tags bootstrapcssinternet-explorerpolyfillpolyfillcssbootstrapieinternet-explorer ### Embed Badge ![Health badge](/badges/coliff-bootstrap-ie11/health.svg) ``` [![Health](https://phpackages.com/badges/coliff-bootstrap-ie11/health.svg)](https://phpackages.com/packages/coliff-bootstrap-ie11) ``` ### Alternatives [wenzhixin/bootstrap-table An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation) 11.8k283.4k1](/packages/wenzhixin-bootstrap-table)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[awssat/tailwindo Convert Bootstrap CSS to Tailwind CSS 1.1k20.3k1](/packages/awssat-tailwindo)[ttskch/select2-bootstrap4-theme Select2 v4 theme for Bootstrap4 43424.6k2](/packages/ttskch-select2-bootstrap4-theme)[phpstrap/phpstrap Bootstrap layout generator 1214.7k](/packages/phpstrap-phpstrap)[bostondv/bootstrap-ninja-forms Adds Bootstrap classes to Ninja Forms 222.2k](/packages/bostondv-bootstrap-ninja-forms) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)