Add IE 11 Support To Bootstrap 5

Add IE 11 Support To Bootstrap 5
File Size: 115 KB
Views Total: 2779
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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:

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.