dice_internet_explorer_gray-wallpaper-1680x1050

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.

<!--[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. :)

The following two tabs change content below.
Fazle is an experienced web developer and a Computer Science Engineer from India. With more than 4+ years of experience, he masters the art of Responsive Web Design (RWD). He's the author of the Book, Jump Start Bootstrap, published by SitePoint. He also excels in prototyping and developing hybrid apps for Mobiles and Smart TVs. You can also find him blogging about various web technologies on his own website HTMLxprs.
  • Paolo Genta

    great article, thanks so much!!!

    • http://gravatar.com/hotbytez Gowrish kumar

      Got my issue resloved!.Thanks a lot

  • NayeemNipun

    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

      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.

  • Pingback: surgical,examinational glove packaging machine

  • http://www.ajaynair.in Aj

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

  • http://www.sudhaindesign.com sudha

    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

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

    • extremecss

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

      • Rustam

        I’m sorry)

        • Syed Fazle Rahman

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

          • Rustam

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

  • Yuga

    Does this work’s in Bootstrap 3.1.1?Bro

    • Syed Fazle Rahman

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

    • http://twitter.com/christianoliff christianoliff ☺ (@christianoliff)

      Yes, it’s compatible with Bootstrap 3.1.1. I’m working on a updated version with refactored grid system (so you no longer need that hacky polyfill which is a bit buggy/glitchy).

      • Shuffle

        Any ideas why the solution would make the bootstrap carousel not function (i.e only the first image is displayed)?

        Works great otherwise.

        Thanks.

  • http://gravatar.com/fahradon fahradon

    Finaly, i solved this issue. thanks to you

  • Ray

    “Copy the above snippet just above in every HTML file of your application.” I can’t view your snippet on this webpage…

    • https://www.google.com/+SyedFazleRahman Syed Fazle Rahman

      @disqus_3pqoogfITM:disqus Thanks for reporting it. I have fixed this page.

  • Md. Ahasan ullah

    how i can use this code?

    • https://www.google.com/+SyedFazleRahman Syed Fazle Rahman

      You have to modify your template as per the above instructions.

  • Md. Ahasan ullah

    Thanks of lot for your sharing part… its nice working ….

  • Pankaj Sood

    but when i am using a cdn for bootstrap css …
    Then how to implement this…

    • https://www.google.com/+SyedFazleRahman Syed Fazle Rahman

      You need to create a new CSS file, override the same CSS selectors and write the above CSS rules in them. Then include this new CSS file below the CDN link. But for this, you need to know the names of the selectors.

      I would suggest you to download the CSS file and check out the selector names where the HTC file path has to be included.

      Hopefully, you understood what I meant. :)

  • Candace

    Thank you very much! It worked! :D

  • Jian Stormborn

    Dear Syed Fazle Rahman,

    Adakah anda orang Melayu? hehehe.

    Anyway it is not working on my Internet Explorer and I was hoping that you can help me. You mentioned that:

    “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”

    I am not sure what you mean by the above statement.

    I have included a photo of my file structure and linking. Thanks!

  • anonymous

    the shit never works

  • http://dignepal.com/event Sushan

    Please show this on a DEMO PAGE
    I am still confused about this article.