CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapinternet-explorer-8
dh1tw
dh1tw

Reputation: 1491

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

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

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

Thanks!

Upvotes: 1

Views: 2697

Answers (2)

dh1tw
dh1tw

Reputation: 1491

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

Upvotes: 1

Faron
Faron

Reputation: 1243

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?

Upvotes: 0

Related Questions