Bootstrap3 ignores col-lg col-md and col-sm in IE8

Question

Problem: IE8 only takes in account my Grid layout with col-x classes. I have found a related / similar problem IE8 issue with Twitter Bootstrap 3 wrt Respond.js and htm5shiv. I've tried all possible combinations, but IE8 still ignores my col-sm, col-md and col-lg classes (Media Tags?).

Here is my demo HTML Code which doesn't work:

{% load staticfiles i18n %}

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/test.css" rel="stylesheet"> 

<!--[if lt IE 9]>
  <script src="{{ STATIC_URL }}js/html5shiv.min.js"></script>
  <script src="{{ STATIC_URL }}js/respond.min.js"></script>
<![endif]-->

</head>
<body>
<div class="container">
    <div class= "row">
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3 yellow">
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3 green">
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3 red">
        </div>
    </div>
</div>

{{STATIC_URL}} just points to my local static directory.

Here is the CSS:

.yellow{
background-color: yellow;
height: 100px;
border: 2px solid black;}

.green{
background-color: green;
height: 100px;
border: 2px solid black;}

.red{
background-color: red;
height: 100px;
border: 2px solid black;}

I have verified that the JS and CSS files are loaded in IE8. I'm using

Bootstrap 3.1.0
html5shiv 3.7.0
respond (latest version Feb/2014 - built 3fde2627484f8cb38e2bd4dbf2374cf41184b0f4)

What am I doing wrong? Why doesn't IE8 uses my col-lg col-md and col-sm classes?

Thanks!

score 1 · Accepted Answer · answered Feb 16 '14 at 22:48

1

I found the problem. Somehow my copy of respond.js was corrupt. With the latest version from Github everything works now as expected.

answered Feb 16 '14 at 22:48

dh1tw

1,411
2
23
29

score 0 · Answer 2 · answered Feb 14 '14 at 18:58

0

Try reverse the "direction" of cols in opposite way from:

 <div class="col-lg-1 col-md-1 col-sm-1 col-xs-3"></div>

to this:

  <div class="col-xs-3 col-sm-1 col-md-1 col-lg-1"></div>

In the guideline of bootstrap griding, it state that staring to grid should begin at the smallest unit and work your way to largest in end. So...maybe that is the reason?

answered Feb 14 '14 at 18:58

Faron

1,255
11
20

Thanks for your idea. I rearranged the order to your suggestion, but it remains the same. On a large screen (1400px) he still uses col-xs instead of col-lg – dh1tw Feb 14 '14 at 20:08

Bootstrap3 ignores col-lg col-md and col-sm in IE8

2 Answers2