Categories
Drupal Development Resources

Tutorial: IE8 Support for Drupal Bootstrap theme

Drupal Bootstrap theme does not support IE8 by default. IE8 does not understand HTML5-specific markup and CSS3 media queries. Without support for HTML5 and media queries, you will only see the “mobile” view when you load a Bootstrap theme in IE8. You’ll need to add support for these two features yourself.

If you need to support Internet Explorer 8, follow these instructions:

1. If you haven’t already, set up a Bootstrap subtheme and load your your CSS/JS locally (not through Bootstrap CDN)

2. Copy theme/system/html.tpl.php from the bootstrap theme into my_subtheme/templates. Replace my_subtheme with the name of your own subtheme.

3. Get a copy of html5shiv.js and respond.js and upload it to your theme folder. The source code comes with many other files. You only need the two files as listed (or the minimized versions). These files need to be loaded locally (from the same server your site is hosted on) in order to work. Do not load them remotely.

4. Load the files in your subtheme’s html.tpl.php file. Replace this code:

<!-- [if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

with

<!-- [if lt IE 9]>
 <script src="/sites/all/themes/my_sub_theme/bootstrap/assets/js/html5shiv.js"></script>
 <script src="/sites/all/themes/my_sub_theme/bootstrap/assets/js/respond.min.js"></script>
<![endif]-->

Replace /sites/all/themes/my_subtheme/js/ with the path to where the files are located.

5. Add the following code to html.tpl.php along with the other <meta> tags:

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

Clear the site cache and enjoy your responsive website with IE8.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.