Add IE 11 Support To Bootstrap 5

Add IE 11 Support To Bootstrap 5
File Size: 18 KB
Views Total: 260
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.

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:

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.