{"id":13759114,"url":"https://github.com/coliff/bootstrap-ie11","last_synced_at":"2025-04-03T23:10:00.491Z","repository":{"id":37961219,"uuid":"171514859","full_name":"coliff/bootstrap-ie11","owner":"coliff","description":"Internet Explorer 11 compatibility solution for Bootstrap 5","archived":false,"fork":false,"pushed_at":"2024-10-01T15:21:53.000Z","size":986,"stargazers_count":95,"open_issues_count":1,"forks_count":15,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-12T06:49:09.857Z","etag":null,"topics":["bootstrap","css","internet-explorer","polyfill"],"latest_commit_sha":null,"homepage":"https://coliff.github.io/bootstrap-ie11/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coliff.png","metadata":{"funding":{"github":"coliff","ko_fi":"coliff","custom":"https://paypal.me/coliff"},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-19T17:04:35.000Z","updated_at":"2024-10-01T15:23:56.000Z","dependencies_parsed_at":"2022-07-21T00:34:03.592Z","dependency_job_id":"691f1662-117a-410c-a49a-0244a361b8da","html_url":"https://github.com/coliff/bootstrap-ie11","commit_stats":{"total_commits":209,"total_committers":10,"mean_commits":20.9,"dds":0.5311004784688995,"last_synced_commit":"b0ddbdf3131caa45c26f1df196107e0b30e8ada6"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-ie11","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-ie11/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-ie11/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-ie11/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coliff","download_url":"https://codeload.github.com/coliff/bootstrap-ie11/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247092393,"owners_count":20882218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","internet-explorer","polyfill"],"created_at":"2024-08-03T13:00:46.574Z","updated_at":"2025-04-03T23:10:00.472Z","avatar_url":"https://github.com/coliff.png","language":"HTML","funding_links":["https://github.com/sponsors/coliff","https://ko-fi.com/coliff","https://paypal.me/coliff"],"categories":["HTML"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://repository-images.githubusercontent.com/171514859/420fd400-c07d-11ea-90cb-58dfe1d8a3f3\" width=\"500\" alt=\"Bootstrap 5 for IE 11\"\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eBootstrap 5 for IE 11\u003c/h3\u003e\n\n[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/bootstrap-ie11/main/LICENSE)\n[![GitHub Super-Linter](https://github.com/coliff/bootstrap-ie11/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)\n[![GitHub stars image](https://img.shields.io/github/stars/coliff/bootstrap-ie11.svg?label=github%20stars)](https://github.com/coliff/bootstrap-ie11)\n[![NPM Version](https://img.shields.io/npm/v/bootstrap-ie11)](https://www.npmjs.com/package/bootstrap-ie11)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/bootstrap-ie11/badge)](https://www.jsdelivr.com/package/npm/bootstrap-ie11)\n\n[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.\n\n## Quick start\n\n- Download the [latest release](https://github.com/coliff/bootstrap-ie11)\n- Clone the repository `git clone https://github.com/coliff/bootstrap-ie11.git`\n- Install with [npm](https://www.npmjs.com/package/bootstrap-ie11) `npm install bootstrap-ie11`\n- Install with [yarn](https://classic.yarnpkg.com/en/package/bootstrap-ie11) `yarn add bootstrap-ie11`\n- Install with [Composer](https://packagist.org/packages/coliff/bootstrap-ie11) `composer require coliff/bootstrap-ie11`\n\n## Usage\n\nJust add this in the `\u003chead\u003e` which will load the CSS and JS - just for IE users.\n\n```html\n\u003cscript nomodule\u003ewindow.MSInputMethodContext \u0026\u0026 document.documentMode \u0026\u0026 document.write('\u003clink rel=\"stylesheet\" href=\"/css/bootstrap-ie11.min.css\"\u003e\u003cscript 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\"\u003e\u003c\\/script\u003e\u003cscript crossorigin=\"anonymous\" src=\"https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes\"\u003e\u003c\\/script\u003e');\u003c/script\u003e\n```\n\nIf you'd prefer to load the bootstrap-ie11 CSS without JavaScript you could use an IE-only media query as follow:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/css/bootstrap-ie11.min.css\" media=\"all and (-ms-high-contrast: active), (-ms-high-contrast: none)\"\u003e\n```\n\nThe CSS can be loaded via a CDN:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.3/css/bootstrap-ie11.min.css\" media=\"all and (-ms-high-contrast: active), (-ms-high-contrast: none)\"\u003e\n```\n\n### Splitting the `document.write` Method\n\nTo 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:\n\n```html\n\u003cscript nomodule\u003e\n  window.MSInputMethodContext \u0026\u0026 document.documentMode \u0026\u0026\n    document.write(\n      '\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.3/css/bootstrap-ie11.min.css\"\u003e'\n      + '\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js\"\u003e\u003c\\/script\u003e'\n      + '\u003cscript src=\"https://cdn.jsdelivr.net/npm/ie11-custom-properties@4.1.0\"\u003e\u003c\\/script\u003e'\n      + '\u003cscript src=\"https://cdn.jsdelivr.net/npm/element-qsa-scope@1.1.0\"\u003e\u003c\\/script\u003e'\n      + '\u003cscript crossorigin=\"anonymous\" src=\"https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes\"\u003e\u003c\\/script\u003e'\n    );\n\u003c/script\u003e\n```\n\n### Getting local copies of dependencies\n\nFor environments where you need local copies of the dependencies, follow these steps to download and reference them locally:\n\n- [Bootstrap CSS](https://github.com/twbs/bootstrap/tree/v5.0.0-beta2/dist/css) - download the .css and corresponding .map files\n- [Bootstrap JS](https://github.com/twbs/bootstrap/tree/v5.0.0-beta2/dist/js) - download the .js and corresponding .map files\n- [IE11 Custom Properties](https://github.com/nuxodin/ie11CustomProperties/blob/master/ie11CustomProperties.js)\n- [Element QSA Scope](https://github.com/jonathantneal/element-qsa-scope/blob/master/index.js)\n- 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:\n  1. Open IE11 or Edge in IE11 mode (search \"IE mode\" in Edge settings to find and enable)\n  2. Copy/paste the URI in the `src` attribute of the `\u003cscript\u003e` tag into the browser's URI bar and hit enter, the response will be whatever your app would receive\n  3. Copy/paste the text on the page and save it to a new file, now you have a local copy\n\nAfter downloading the dependencies, update your script to reference these local files:\n\n```html\n\u003cscript nomodule\u003e\n  window.MSInputMethodContext \u0026\u0026 document.documentMode \u0026\u0026\n    document.write(\n      '\u003clink rel=\"stylesheet\" href=\"css/bootstrap-ie11.min.css\"\u003e'\n      + '\u003cscript src=\"js/bootstrap.bundle.min.js\"\u003e\u003c\\/script\u003e'\n      + '\u003cscript src=\"js/ie11CustomProperties.js\"\u003e\u003c\\/script\u003e'\n      + '\u003cscript src=\"js/elementQsaScope.js\"\u003e\u003c\\/script\u003e'\n      + '\u003cscript src=\"js/polyfill.js\"\u003e\u003c\\/script\u003e'\n    );\n\u003c/script\u003e\n```\n\n## Forcing IE11 Out of Compatibility Mode\n\nIf 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:\n\n```html\n\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n```\n\n## FAQS\n\n### What does this fix/polyfill?\n\n- Workaround for the SVG overflow bug\n- Remove the default vertical scrollbar from `textarea`\n- Correct the text-wrapping and color inheritance for `legend`\n- Disable auto-hiding scrollbar to avoid overlap on `pre`\n- Fixes for card image size bug\n- Fixes for text color and text opacity utility classes\n- Improved layout for `justify-content-evenly` flex utility\n- Fixes for stacks gap spacing\n- Add the correct display values for `template` and `main`\n- Fixes for modals (`.modal-dialog-centered` and `.modal-dialog-scrollable`)\n- Fixes for forms (inputs, checkboxes, radio buttons, switches, selects, ranges, placeholders and floating labels)\n- Fix for the `btn-close-white` SVG icon color\n- Fix for dark carousel previous and next SVG icon colors\n- Fix for `valid-tooltip` \u0026 `invalid-tooltip` positioning\n- Adds vendor prefixes for `user-select-auto` and `user-select-none` utilities\n- Fix for `.visually-hidden` utility class\n- Fix for vertical rule `.vr` class\n- Bootstrap 5 Beta 2 is loaded via CDN (The JavaScript in Bootstrap 5 Beta 3 and later is incompatible)\n- Polyfill for CSS custom properties ([ie11CustomProperties](https://github.com/nuxodin/ie11CustomProperties))\n- Polyfill to fix most JavaScript components ([Polyfill](https://polyfill-fastly.io/v3/))\n- Polyfill to fix tabs ([element-qsa-scope polyfill](https://www.npmjs.com/package/element-qsa-scope))\n- Fixes for Accordion button icons\n- Fix for border utility classes\n\n### Known Issues\n\n- 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)\n- 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).\n- 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.\n- 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.\n- View a list of known issues at [https://github.com/coliff/bootstrap-ie11/issues](https://github.com/coliff/bootstrap-ie11/issues).\n- From Bootstrap 5.2 onwards, CSS custom properties are used extensively which can cause issues with the ie11CustomProperties polyfill.\n\n## Demo\n\nSee this in action at: [https://coliff.github.io/bootstrap-ie11/tests/](https://coliff.github.io/bootstrap-ie11/tests/)\n\n## Thanks\n\n\u003ca href=\"https://www.browserstack.com/\" rel=\"sponsor\"\u003e\n  \u003cimg src=\"https://live.browserstack.com/images/opensource/browserstack-logo.svg\" alt=\"BrowserStack Logo\" width=\"192\" height=\"42\"\u003e\n\u003c/a\u003e\n\nThanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fbootstrap-ie11","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoliff%2Fbootstrap-ie11","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fbootstrap-ie11/lists"}