Bootstrap Grid IE 8 compatibility

Question

I'm using bootstrap 3 because I was told it is compatible with Explorer 8. I was using foundation before.

But I'm trying to make the bootstrap grid to work on Explorer with no success.

When I use the grid on Firefox it is straightforward. You use a div with the class row and the children divs you put the class col-md-*.

That works on Firefox but on Explorer 8 it just nest the divs on top of each other.

I managed to make it work on Firefox and Explorer 8 usign col-xs-*. But when I change the size of the window to simulate how it is shown on mobile devices it just streches the divs instead of stacking them on top of each other, as expected.

Now I have a dillema. Col-xs works on Explorer but it is not responsive. Cols-md works on every device except Explorer 8.

This is my test code:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <meta charset="utf8" />
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <title>Bootstrap test</title>
    </head>
    <body>
        <div class="main container-fluid">
            <header class="jumbotron text-center">
                <h1>Bootstrap test</h1>
            </header>
            <section class="row">
                <div class="col-md-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
                </div>
                <div class="col-md-3">
                    <h3>Menu</h3>
                    <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                        <li><a href="#">Item 7</a></li>
                        <li><a href="#">Item 8</a></li>
                        <li><a href="#">Item 9</a></li>
                        <li><a href="#">Item 10</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </body>
</html>

The above code works on Firefox but not in Explorer 8.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <meta charset="utf8" />
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <title>Bootstrap test</title>
    </head>
    <body>
        <div class="main container-fluid">
            <header class="jumbotron text-center">
                <h1>Bootstrap test</h1>
            </header>
            <section class="row">
                <div class="cols-xs-9">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas in mi vel sodales. Sed sed fermentum dolor, vitae tristique lorem. Suspendisse potenti. Nulla in mattis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vel tortor ex. Sed ultrices purus eu aliquam hendrerit.</p>
                </div>
                <div class="cols-xs-3">
                    <h3>Menu</h3>
                    <ul>
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                        <li><a href="#">Item 5</a></li>
                        <li><a href="#">Item 6</a></li>
                        <li><a href="#">Item 7</a></li>
                        <li><a href="#">Item 8</a></li>
                        <li><a href="#">Item 9</a></li>
                        <li><a href="#">Item 10</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </body>
</html>

This code works with Explorer but is not responsive.

enter image description here

But is not what I want, as you can see in the "desired result" image. — Filipe Teixeira, Jun 30 '15 at 23:09

score 3 · Accepted Answer · answered Jun 30 '15 at 23:06

3

I found the answer on the comments on this post:

http://www.joostrap.com/blog/bootstrap-3-supporting-internet-explorer-8-and-9

For us this was solved by making sure the Respond js loads AFTER the css.

I also changed col-xs to col-sm and now it works wonders on Firefox and Explorer 8 even on 1024x768 resolutions.

answered Jun 30 '15 at 23:06

Filipe Teixeira

479
1
7
26

The need for `respond.js` is also covered on the "Getting Started" page on the Bootstrap site, along with other IE8 limitations. http://getbootstrap.com/getting-started/#support-browsers – CodingWithSpike Jul 01 '15 at 00:38
Yes, but for some reason it doesn't work if you put respond.js befores the css. – Filipe Teixeira Jul 01 '15 at 00:56
Ah, yes. JS is executed right after the file is loaded, and respond.js scans your stylesheets to rig up all kinds of hacks to make it seem like media queries work in IE8. If you load the .js before the .css, then there are no styles to scan when respond.js is executed. – CodingWithSpike Jul 01 '15 at 11:14
Adding this trick is from http://www.joostrap.com/blog/bootstrap-3-supporting-internet-explorer-8-and-9 is very useful, thanks: .container { display:table; width: 100%; } .row { height: 100%; display: table-row; } .col-sm-4 { display: table-cell; } – Ahmed Apr 17 '16 at 04:40

score 0 · Answer 2 · answered Jul 01 '15 at 01:17

0

I'm not seeing that you have a viewport meta tag in the head of your document:

<meta name="viewport" content="width=device-width, initial-scale=1">

See http://getbootstrap.com/css/#overview-mobile for more details.

answered Jul 01 '15 at 01:17

David Taiaroa

25,157
7
62
50

You are right, but that is not the root of the problem. – Filipe Teixeira Jul 02 '15 at 21:54

Bootstrap Grid IE 8 compatibility

2 Answers2