Twitter Bootstrap Responsive layout does not work in IE8 or lower

Question

I developed a site using twitter bootstrap and it seems that the responsive layout part is broken in all IE browsers from IE8 and below. Is this just not supported for these

Answer 1

These are the steps I took to get this working:

Take a look at the response.js demo page in IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html

It works so get that working locally by downloading the response.js into your vendor/assets or somewhere similar.

Disable your local bootstrap and try this in your css:

/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
  body {
    background: blue;
  }
}

It works!

Because I was using the cdn, I needed to download and host it locally:
http://getbootstrap.com/getting-started/#download

So, it works with these:

= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'

You'll also need to get rid of any @import declarations.