Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap 3 grid layout not working in IE8

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.

like image 338
anirvan Avatar asked Sep 12 '13 14:09

anirvan


2 Answers

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!

like image 140
Loran Avatar answered Oct 20 '22 17:10

Loran


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.

like image 32
anirvan Avatar answered Oct 20 '22 15:10

anirvan