🚀 Socket Launch Week 🚀 Day 2: Introducing Repository Labels and Security Policies.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

bootstrap-ie11

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bootstrap-ie11

Bootstrap 5 for Internet Explorer 11

5.3.5
latest
Source
npm
Version published
Maintainers
1
Created
Source

Bootstrap 5 for IE 11

Bootstrap 5 for IE 11

LICENSE: MIT 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-fastly.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.3.5/css/bootstrap-ie11.min.css" media="all and (-ms-high-contrast: active), (-ms-high-contrast: none)">

Splitting the document.write Method

To 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:

<script nomodule>
  window.MSInputMethodContext && document.documentMode &&
    document.write(
      '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5.3.5/css/bootstrap-ie11.min.css">'
      + '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"><\/script>'
      + '<script src="https://cdn.jsdelivr.net/npm/ie11-custom-properties@4.1.0"><\/script>'
      + '<script src="https://cdn.jsdelivr.net/npm/element-qsa-scope@1.1.0"><\/script>'
      + '<script crossorigin="anonymous" src="https://polyfill-fastly.io/v3/polyfill.min.js?features=default%2CNumber.parseInt%2CNumber.parseFloat%2CArray.prototype.find%2CArray.prototype.includes"><\/script>'
    );
</script>

Getting local copies of dependencies

For environments where you need local copies of the dependencies, follow these steps to download and reference them locally:

  • Bootstrap CSS - download the .css and corresponding .map files
  • Bootstrap JS - download the .js and corresponding .map files
  • IE11 Custom Properties
  • Element QSA Scope
  • 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:
    • Open IE11 or Edge in IE11 mode (search "IE mode" in Edge settings to find and enable)
    • Copy/paste the URI in the src attribute of the <script> tag into the browser's URI bar and hit enter, the response will be whatever your app would receive
    • Copy/paste the text on the page and save it to a new file, now you have a local copy

After downloading the dependencies, update your script to reference these local files:

<script nomodule>
  window.MSInputMethodContext && document.documentMode &&
    document.write(
      '<link rel="stylesheet" href="css/bootstrap-ie11.min.css">'
      + '<script src="js/bootstrap.bundle.min.js"><\/script>'
      + '<script src="js/ie11CustomProperties.js"><\/script>'
      + '<script src="js/elementQsaScope.js"><\/script>'
      + '<script src="js/polyfill.js"><\/script>'
    );
</script>

Forcing IE11 Out of Compatibility Mode

If 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:

<meta http-equiv="x-ua-compatible" content="ie=edge">

FAQS

What does this fix/polyfill?

  • Grid flexbug workaround
  • 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)
  • 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.

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

Keywords

bootstrap
css
ie
internet-explorer
polyfill

FAQs

Package last updated on 09 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Introducing Repository Labels and Security Policies

Product

Introducing Repository Labels and Security Policies

Socket is introducing a new way to organize repositories and apply repository-specific security policies.

By Nolan Lawson  -  Apr 22, 2025
Introducing .NET Support in Socket

Product

Introducing .NET Support in Socket

Socket now supports .NET, bringing supply chain security and SBOM accuracy to NuGet and MSBuild-powered C# projects.

By Eli Insua, Rakesh Chatrath  -  Apr 21, 2025