Twitter Bootstrap Responsive layout does not work

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

Answer 1

You should all read this forum post.

It explains very clearly the challenges between IE and Twitter Bootstrap. It also gives you solutions that actually work.

Quote:

The problem here is that on the official pages like http://twitter.github.com/bootstrap/ it claims to work in all browsers, even IE7. Which, theoretically it can be, but you have to design and develop around a certain frame of mind when developing responsively.

Answer 2

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

Answer 3

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.

Answer 4

I used the html5shiv at:

https://code.google.com/p/html5shiv/

This worked for me. It is also available using bower.

Answer 5

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

Answer 6

I have tried all of the ways described above, and it works but so slowly. I offer the next approach. We should decompose css file that is contains @media and insert each rule in the separate file. Then we should conditionally upload each file, depending from browser screen width. All this actions will do the script cload.js. Download cload.js and read how to use it you can here