Twitter Bootstrap Responsive layout does not work in IE8 or lower

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 browsers?


If you want to have better performance and your structure is not too complicated.

You can try Respond.JS

From the author:

This isn't the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.

If you're looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)


For supporting @media queries in IE 8 and below, check out
css3-mediaqueries-js
.

css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

PS: I use Twitter Bootstrap with this plugin and it works awesome! Hope this helps! :)


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.