Guide: How to Make Boostrap 3 Support IE8

BootstrapNeed to support IE8 when using Bootstrap 3?

It isn’t too hard (thankfully). Follow this little tutorial and you’ll be on your way to success!

1) Use the latest version of Bootstrap! This is key. Older versions utilized max-height/width and min-height/width, and when joining that with box-sizing, it can cause compatibility issues. This was remedied in the newer versions.

2) Add the following meta tag to your head

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Essentially, this just tells IE to render in the latest and greatest IE mode (aka edge).

3) Add html5shiv to your head

<!--[if lt IE 9]>
    <script type='text/javascript' src='/j/html5shiv.min.js'></script>
<![endif]-->

5) Add respond.js before your </body> tag

<!--[if lt IE 9]>
    <script type='text/javascript' src='/j/respond.min.js'></script>
<![endif]-->

You now have Bootstrap 3 support for Internet Explorer 8! Depending on your layout, you’ll still want to go ahead and make an IE8 (and lower) style sheet still to help round out any edges.

Leave a Reply

Your email address will not be published.