🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This package provides CSS fixes and JavaScript polyfills to make your Bootstrap 4 based project work properly on the legacy browsers: IE 9 and IE 8.

Bootstrap bootstrap-4

Documentation

LICENSE Tip Me via PayPal NPM Downloads github-stars-image code style: prettier

Bootstrap 4 for IE8 and IE9

Bootstrap 4 drops support for Internet Explorer 8 and 9, but you can add it back by simply adding a conditional statement targeting IE 8 and 9 with a CSS file and a CDN-hosted JavaScript file to polyfill HTML5 element support.

Quick start

Several quick start options are available:

  • Download the latest release
  • Clone the repo git clone https://github.com/coliff/bootstrap-ie8.git
  • Install with npm npm install bootstrap-ie8
  • Install with yarn yarn add bootstrap-ie8
  • Install with Composer composer require coliff/bootstrap-ie8:4.3.1

Usage

  1. Add <meta http-equiv="x-ua-compatible" content="ie=edge"> to the top of the of your page

  2. Add the following conditional statements to the <head> of your page but after the Bootstrap 4 CSS:

<!--[if IE 9]>   <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie9.min.css" rel="stylesheet"> <![endif]--> <!--[if lte IE 8]>   <link href="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/css/bootstrap-ie8.min.css" rel="stylesheet">   <script src="https://cdn.jsdelivr.net/g/[email protected]"></script> <![endif]-->

Optional JavaScript Fix

To fix the dropdown menus and modals you can add the following to the footer:

<!--[if gte IE 9]><!-->   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <!--<![endif]--> <!--[if IE 9]>   <script src="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/js/bootstrap-ie9.min.js"></script> <![endif]--> <!--[if lte IE 8]>   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>   <script src="https://cdn.jsdelivr.net/gh/coliff/bootstrap-ie8/js/bootstrap-ie8.min.js"></script>   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script> <![endif]-->

This will load jQuery, PopperJS and Bootstrap as normal on all browsers other than IE8. IE9 will load the bootstrap-ie9.js script. IE8 will load the latest compatible version of jQuery, the unminified Bootstrap JS (the minified version causes an error) and the bootstrap-ie8.js fix.

FAQS

Q. What does this fix/polyfill?

A. Internet Explorer 9 doesn't support flexbox so there is a float-based layout fallback and a couple of other minor fixes. Internet Explorer 8 doesn't support rem units so all units are specified in pixels. Media Queries are also not supported so IE8 has a fixed-width layout (min-width 998px).

Q. Is the CSS hosted on a CDN?

A. Yes, thanks to JSDelivr minified versions are available with the direct links:

Q. Will you provide LESS/SASS files?

A. Maybe in a future release I'll provide SASS file (with comments).

Q. Do I need the RespondJS polyfill for IE8 like Bootstrap 3 uses?

A. No. Instead the CSS is set to be fixed-width which makes things a lot easier. You don't need to change your HTML markup, the CSS will take care of it as the (min-width:992px) media queries are all set.

Q. Where can I see a demo?

A. Right here: http://coliff.github.io/bootstrap-ie8/test.htm

Q. I don't have access to IE8/IE9 browser to test- how can I see how my site appears?

A. You can use free virtual machines from Microsoft or use Browserstack.

Known Issues

Thanks

BrowserStack Logo

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers


You May Also Like