Twitter Bootstrap, one of the most popular CSS framework on web, has dropped Internet Explorer 7 and less support in its latest version Bootstrap 3. This is no surprise that the number of users using Internet Explorer 7 or less have tremendously decreased in past few months. But for major organizations and institutions where upgrading is still a major issue, compatibility with IE7 is a must. If are in looking to build a project using Twitter Bootstrap 3 and still want to make it compatible with Internet Explorer 7 then this article is for. I will explaining some plugins using which we can make Twitter Bootstrap 3 compatible with Internet Explorer 7.
Firstly, you need a Twitter Bootstrap 3 project which is obvious. We will be using Bootstrap 3 for IE7 plugin which is being developed and supported by Christian (@coliff) at github. Do remember to thank him on github if this solves your problem.
Go ahead download Bootstrap 3 for IE7 zip from Github. Once the download is over extract and copy
bootstrap-ie7.css to your css directory. This plugin depends upon an external plugin which is a polyfill named
boxsizing.htc for fixing box-sizing support in lower version of Internet explorer. To download this file go to https://github.com/Schepp/box-sizing-polyfill and download .htc file. Copy the .htc file into any folder( I would prefer in the same css folder ). Now we are ready with all the necessary requirements.
Modifying the code
First we need to fix all the box sizing property in Internet Explorer. Go to your bootstrap.css or bootstrap.min.css whatever you are using. Search for “box-sizing” and paste the below code below every box-sizing property.
Make sure you are counting -webkit-box-sizing, -moz-box-sizing and box-sizing in the bootstrap css as a single entity. You need to paste the above snippet just below these codes.
Another important thing here is that the path to the .htc file above must be relative to your website URL and not with respect to the location of the css file. The star mark just ahead of behaviour property is required to assure that this .htc file is used only by Internet Explorer version 7 and below. If you ever want to use it for IE8 and above simply remove the star mark. Now we are done with polyfill. Let’s move to use bootstrap-ie7.css in our snippet.
<!--[if lt IE 8]> <link href="/css/bootstrap-ie7.css" rel="stylesheet"> <![endif]-->
Copy the above snippet in the
<head> of every HTML file of your application. And it’s done! Go ahead and test your application in Internet Explorer 7.
If you have followed all the above steps carefully and intelligently then your Twitter Bootstrap 3 application should be compatible with Internet Explorer version 7. There may be few border-radius issues and some other css3 issues since IE7 doesn’t support these css properties too! Duh!! But your application shouldn’t break now in IE7. Hopefully you have found this article useful. If you have any queries do drop them below. Also if you are happy with this solution do drop some good comments in order to encourage us.
Latest posts by Syed Fazle Rahman (see all)
- Best Bootstrap Tutorials 2014 - February 13, 2014
- Getting started with Foundation 5 – Understanding HTML markup and installations - December 20, 2013
- Making Twitter Bootstrap 3 Compatible with Internet Explorer 7 and below - November 29, 2013
- Twitter Bootstrap Vs Yahoo Pure! Which one to opt? - November 5, 2013
- Getting started with Twitter Bootstrap 3 – Installations Tutorial - November 5, 2013