Add IE 11 Support To Bootstrap 5

A JavaScript & CSS solution to make Bootstrap 5 work with IE 11.

Boostrap team offically announced that the next generation of Bootstrap framework (Bootstrap 5) will drop browser support for Internet Explorer 10 and 11.

If you're re-building your web application using Bootstrap 5 and want it to still work on IE 11, you might need this extension to fix the compatibility issues like cards, modals, navbars, grid layout utilities, etc.

See Also:

• Make Bootstrap 4 Work On IE9 And IE 8

How to use it:

1. Load the Bootstrap 5 framework in your project.

<!-- Bootstrap 5 core CSS -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<!-- Bootstrap 5 core JavaScript -->
<script src="/path/to/cdn/popper.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Add the following JavaScript snippet to the head section of the document. That's it.

• bootstrap-ie11.min.css: CSS polyfill for Bootstrap 5
• jQuery Slim: Required For Bootstrap 4
• Bootstrap 4 JavaScript: Required for compatibility issues
• ie11CustomProperties: Custom Properties polyfill for Internet Explorer 11

<script>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="/css/bootstrap-ie11.min.css"><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"><\/script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"><\/script><script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\/script>');</script>

Changelog:

2022-12-06

• Hide default caret only for form-check-input checkboxes

2022-11-22

• Update for Bootstrap 5.2.3

2022-10-03

• Fix for additive border utilities
• Fix for text color utilities
• Updated and expanded tests

2022-09-08

• Fixes for Accordions Button Icons and Flush Accordions border radius

2022-07-20

• Fix for modals not being horizontally centered
• Add list group bg colors
• Fixes for border utility classes
• Updated and expanded tests

2022-06-11

• Fix for modals not being horizontally centered

2022-05-30

• Add list group bg colors

2022-05-25

• fixes for border utility classes

v5.1.3 (2021-10-12)

• Adjusted color for form range active thumb
• Sets line-height for progress label to align vertically

v5.1.2 (2021-10-07)

• Improved border on .form-check-input
• Updated and expanded tests

v5.1.1 (2021-09-08)

• Fixes for stacks gap spacing
• Fix for vertical rule .vr class
• Fix for .justify-content-evenly flex utility

v5.1.0 (2021-08-06)

• Sets width for color input (so it is wide enough to see a 6 digit hex color with #)
• Adds text color and text opacity utility classes
• Updated and expanded tests

v5.0.1 (2021-06-23)

• Adds -ms-user-select: none !important; to .form-control:disabled

v5.0.1 (2021-05-14)

• Bundled JavaScript polyfill guidance means less HTTP requests and faster loading

2021-03-25

• Updated for Bootstrap 5 beta-3

2021-02-25

• Fixed for Table Hover Colors

2021-02-11

• Updated for Bootstrap 5 beta-2.

2020-12-10

• Updated for Bootstrap 5 beta-1.

2020-12-07

• Fixed Validation tooltips are not positioned correctly

2020-11-13

• Fixes for Tooltips & Radio Buttons

2020-11-13

• Updates for Bootstrap v5.0.0-alpha3

2020-11-02

• chore: replace node-sass with dart-sass

2020-10-08

• Fix for navbar-collapse

2020-09-30

• Updates for Alpha2 release

2020-07-27

• Updates for Alpha1 release

2020-07-03

• re-generate CSS

2020-07-02

• Update

 

---

This awesome jQuery plugin is developed by coliff. For more Advanced Usages, please check the demo page or visit the official website.