Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Bootstrap responsive layout work on IE8

I've been search for a while and found some people got it working, but none of them provide any code samples.

I tried their suggestions but it didn't work for me. By suggestions, I tried adding <meta http-equiv="X-UA-Compatible" content="IE=edge" />, respond.js or css3-mediaqueries-js, but none of them helped.

Here's a jsfiddle, if you view it with IE8, you'll see both a and b are on the same row regardless of your browser width.

But if you view with Chrome, FF or IE9 or above, you'll see them on different rows or single row depending on the browser width.

UPDATE

I tried to uncomment one of them (css3-mediaquery, html5shiv and respond) at a time but got no luck with any one of them.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

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

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="span4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="span8">
                LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
    <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
    <%--<script type="text/javascript" src="js/respond.js"></script>--%>

    </script>
</body>

</html>
like image 608
Ray Cheng Avatar asked Dec 18 '12 00:12

Ray Cheng


2 Answers

IE 8 doesn't support media queries out of the box.

Based on this question and this question, you're going to want to use an extension like css3-mediaqueries-js or Respond.

like image 113
Jason Towne Avatar answered Nov 15 '22 21:11

Jason Towne


Try using html5shiv, its basically a HTML5 IE enabling script and that should get bootstrap working in IE 6,7 and 8. This can also be directly hot linked like this:

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

It must be included before the <body> element (i.e. in the <head>)

like image 28
Akshay Raje Avatar answered Nov 15 '22 21:11

Akshay Raje