Bootstrap .container not centered in IE8

Question

For some reason, the .container element doesn't get centered in IE8. Here is the minimal code to demonstrate the problem I am encountering :

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head><body>
    <div id="content" class="container">
        <div class="row">
            <div class="col-xs-12">
                <p>Test</p>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body></html>

Online demo: http://tinyurl.com/ndn64tz

On my IE8 browser, the text "Test" is all on the left of the viewport. — Matthew, Dec 21 '13 at 09:22
Try the answer I have posted.. Should work.. Set the desired height.. — Rahul Patil, Dec 21 '13 at 09:24

score 2 · Accepted Answer · edited May 23 '17 at 11:52

I am not sure what is the problem, it appears well when I try it on my machine (IE11 with user agent changed).. This trick should work.. (Override Container

.container{
  width:1020px; //or your desired width
  margin:0 auto;
  padding:10px;
}

Make appropriate changes if needed.

Alternative answer :

Include this library after all the stylesheets are referred..

https://github.com/scottjehl/Respond

This will enable CSS3 Media Queries in old browsers.

and add <meta http-equiv="X-UA-Compatible" content="IE=edge">

Source of alternative answer : IE8 issue with Twitter Bootstrap 3

score 2 · Answer 2 · answered Dec 21 '13 at 09:28

2

do not forget to read bootstrap doc http://getbootstrap.com/getting-started/#browsers

also use this tag

<meta http-equiv="X-UA-Compatible" content="IE=edge">

answered Dec 21 '13 at 09:28

deepak

346
1
5

user956584 · Answer 3 · 2014-08-05T08:02:18.353

0

<!DOCTYPE>
<html>

OR

<!--[if IE 8]><center><![endif]-->
 <section id="first" class="container">
    <div class="row">
     <!--[if IE 8]></center><![endif]-->
    <div class="col-lg-12">Helo World</div>
    </div>
 </section>

Just add center tag

edited Aug 05 '14 at 08:02

answered Aug 04 '14 at 13:05

user956584

5,316
3
40
50

Bootstrap .container not centered in IE8

3 Answers3