Bootstrap 4 for IE8 and IE9

Posted on

Bootstrap 4 drops support for Internet Explorer 8 and 9. Worldwide usage stats of both browsers are miniscule now (IE8 is at 0.27% and IE9 at 0.16% based on StatCounter GlobalStats for December, 2017 ), but still there maybe times when you need to support these older browsers.

I’ve created a CSS-only polyfill solution which can be loaded via conditional statements as follows:

<!--[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/html5shiv@3.7.3"></script>
<![endif]-->

IE9 Visitors will get a bootstrap-ie9.css stylesheet which provides a float-based layout fallback since IE9 doesn’t support Flexbox.

IE8 visitors will get a bootstrap-ie8.css stylesheet which fixes many compatibility issues including all px units converted to rems and a fixed-width (1000px) layout is used. In addition the HTML5Shiv polyfill is loaded via a CDN.

Bootstrap 4 on IE8

More info on GitHub

UPDATE 05/05/2018: The project now includes a JavaScript fix for modals and dropdown menus to work correctly.

You might also like

Popover CSS Inspector for Bootstrap 5

A customizable style inspector for Bootstrap Popovers

Bootstrap 5 Print Stylesheet

Optimized CSS for printing