CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinternet-explorerresponsive-design
Filipe Teixeira
Filipe Teixeira

Reputation: 499

Bootstrap Grid IE 8 compatibility

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

Upvotes: 0

Views: 4432

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

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.

Upvotes: 0

Filipe Teixeira
Filipe Teixeira

Reputation: 499

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.

Upvotes: 3

Related Questions