Making Twitter Bootstrap 3 Compatible with Internet Explorer 7 and below

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.

Getting Started

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.

*behavior: url(/css/boxsizing.htc);

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.

1
2
3
<!--[if lt IE 8]>
		<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->

Copy the above snippet just above in 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. :)

The following two tabs change content below.
Fazle is a computer science student who maintains an interest in web technologies and development. His main focus is CSS and front end designing. He has been in the web industry some years and has seen the web transform from traditional designs to responsive design structure. He is currently working for Gadgetic World, technology/gadgets blog.

About the Author

Syed Fazle Rahman

Fazle is a computer science student who maintains an interest in web technologies and development. His main focus is CSS and front end designing. He has been in the web industry some years and has seen the web transform from traditional designs to responsive design structure. He is currently working for Gadgetic World, technology/gadgets blog.

15 Comments

  • Paolo Genta said:
    February 5, 2014 at 11:48 am

    great article, thanks so much!!!

    • February 17, 2014 at 1:58 pm

      Got my issue resloved!.Thanks a lot

  • NayeemNipun said:
    February 18, 2014 at 2:22 pm

    My issue isn’t solve yet… Here’s the link on which i’m working. I do all the steps carefully. But i didn’t get result. Can anyone help me? Please…. Thanks in advanced.
    http://nipun.nameinto.net/hibrulang/

    • Flaubert said:
      February 19, 2014 at 12:30 am

      You have a lot of mistakes.
      You are not referencing the htc file correctly. You have behavior:url(boxsizing.htc)
      instead of behavior:url(/hibrulang/css/boxsizing.htc).
      You’re loading jquery twice: 1.8.2 in the and 1.10.2 in the bottom of the tag.
      Take a look to the Bootstrap’s Basic Template and try again.
      http://getbootstrap.com/getting-started/#template.

  • Aj said:
    March 6, 2014 at 7:42 am

    Tried, but all my col-md- ‘s are goin 100% in ie 7 & 8. All messy too!!

  • sudha said:
    March 13, 2014 at 1:41 pm

    What about IE 8? Bootstrap 3 is not supporting for IE 8 then what is the solution to fix the issue.
    Answer to my question anybody please.

  • Pingback:

    Cheap Gucci Belts

  • Rustam said:
    March 18, 2014 at 12:10 pm

    Why don’t you use this solution on your site?

    • extremecss said:
      March 18, 2014 at 1:51 pm

      Guess what? This website isn’t built with Bootstrap. :)

      • Rustam said:
        March 18, 2014 at 2:24 pm

        I’m sorry)

        • Syed Fazle Rahman said:
          March 22, 2014 at 7:58 pm

          BTW thanks for reminding us. We are working on a redesigned version of ExtremeCSS which will also be compatible with IE7. :)

          • Rustam said:
            March 25, 2014 at 6:50 am

            Bootstrap 3 for IE7 + respond.js and you will be happy)

  • Yuga said:
    March 21, 2014 at 10:15 am

    Does this work’s in Bootstrap 3.1.1?Bro

    • Syed Fazle Rahman said:
      March 22, 2014 at 7:59 pm

      Yes, I think so. But I haven’t tested it. Let me know if it works!

Have any queries? Leave a comment.