Wrapping columns in IE8 using Bootstrap 3 and Respond.js

Question

I'm creating a site with Bootstrap 3 that has to be IE8 compatible. The code works fine is most browsers and I've added respond.js to try to make it work in IE8. For some reason in IE8 the third column always returns to the next line. http://jsfiddle.net/suRzm/

<div class="row">
    <div class="container">
        <div class="col-sm-4" style="background:red;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:green;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:blue;">
            &nbsp;
        </div>
    </div>
</div>

enter image description here

possible duplicate of [IE8 issue with Twitter Bootstrap 3](http://stackoverflow.com/questions/17947182/ie8-issue-with-twitter-bootstrap-3) — Bass Jobsen, Sep 24 '13 at 08:28

score 1 · Accepted Answer · answered Feb 07 '14 at 23:03

I know this is an old one, but I'll answer just to keep it from going unanswered. First, the "container" and "row" classes are reversed; whereas the container should be used to wrap the row(s). Second, as joeldown mentions above, the page needs the following in the document head: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Here is a simplified HTML file that solves the question. Anyone implementing it will need to adjust paths to the CSS and script, of course. Tested on FF 17, Chrome 30, and IE8...

<!DOCTYPE HTML>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:green;">
            &nbsp;
        </div>
        <div class="col-sm-4" style="background:blue;">
            &nbsp;
        </div>
    </div>
</div>
</body>
</html>

Wrapping columns in IE8 using Bootstrap 3 and Respond.js

1 Answers1

Linked