Skip to content

coliff/bootstrap-ie11

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
2 branches 17 tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
.github
 
 
.vscode
 
 
css
 
 
scss
 
 
tests
 
 
.browserslistrc
 
 
.cspell.json
 
 
.editorconfig
 
 
.gitattributes
 
 
.gitignore
 
 
.prettierignore
 
 
.stylelintignore
 
 
.stylelintrc.json
 
 
CHANGELOG.md
 
 
LICENSE
 
 
README.md
 
 
composer.json
 
 
package-lock.json
 
 
package.json
 
 
Bootstrap 5 for IE 11 Quick start Usage FAQS What does this fix/polyfill? Known Issues How can I test this? Demo Thanks

README.md

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 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/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.2.3/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)
  • 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, 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.

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

About

Internet Explorer 11 compatibility solution for Bootstrap 5

coliff.github.io/bootstrap-ie11/

Topics

css polyfill bootstrap internet-explorer

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Stars

90 stars

Watchers

4 watching

Forks

16 forks

Releases 17

v5.2.3 Latest
Nov 22, 2022
+ 16 releases

Sponsor this project

  •  
Learn more about GitHub Sponsors

Used by 23

  • @c0l0mb0
  • @smlee98
  • @morpht
  • @smlee98
  • @smlee98
  • @VladiGeorgiev
  • @macroses
  • @wxlxxx
+ 15

Contributors 7

Languages