column are full width in IE 8 - Css bootstrap

Question

I use bootstrap 3.0.3 in my web page and add html5shiv lib and respond lib for fix it this but it is not worked on internet explorer 8.

my html code:

<         


        

Answer 1

Based on the solution in the thread : Must Bootstrap container elements include row elements?, your markup should be :

and use this CSS to achieve it in IE8:

.container
{
    display:table;
    width: 100%;
}

.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

here is the working demo

The .row class is not required inside a .container, but if you include then, container > row is the order not row > container (which you code)!

EDIT

It might be worth noting that respond.js only works for local files. So if you have got css files of bootstrap from CDN for your website on IE8, it won't work, instead, try with a local copy of bootstrap.css

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and file:// Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Respond.js and @import Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

IE Compatibility modes Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate tag in your pages:

Source : Getbootstrap