bootstrap 3 grid layout not working in IE8

Question

I've been trying to get the grid layout system of Bootstrap 3 to work well with IE8, but it just doesn't work. I do not have any need for a responsive layout.

To be absolutely sure that I'm not introducing some random errors in the HTML file I've created, I went ahead and downloaded a fresh copy of Bootstrap 3. After extracting the contents, I opened the example grid HTML file (within the /examples/grid folder), and lo behold, even in the official distribution, the grids appear stacked on top of each other, instead of spanning across a row!

What's strange though, when I browse to the inline forms section of the online documentation on my IE8, the grid layout seems to work just fine.

Answer 1

According to the Bootstrap 3 docs you need to include Respond.js in order to get the CSS 3 media queries to work. Hope that helps!

Answer 2

The problem it appears is using the wrong class for the grids. Even though the screen size of my Windows system was larger than my Mac book's, I made the wrong assumption that the resolution would be the same or higher.

I had developed my site on the mac, and used .col-md- classes for the grid layout. However, since the resolution of my Win device was lower, .col-xs- should have been used. And hence, it was appearing stacked.

Lesson: Even though your Win system might have a larger screen, it's resolution can be as low as that of a tablet.