IE8 issue with Twitter Bootstrap 3

Question

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup

Note See also: https://github.com/scottjehl/Respond/pull/206

Update:

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

See also: https://github.com/scottjehl/Respond

For this reason the basic template contains these lines in the head section:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

I also had to set the following META tag:

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

I had this same issue when transitioning from Bootstrap 2 to 3. I'd already got respond.js and html5shiv.js and set my meta to edge. I'd missed that from 2 to 3 the navbar element type had changed. In Bootstrap 2 it was nav. In Bootstrap 3 it's now header. So to fully resolve the problem I had to

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

Put this right after I'd loaded my css:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

and then change

<nav class="navbar" role="navigation">
</nav>

to

<header class="navbar" role="navigation">
</header>

Oh and for good measure I also added

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

simply because that's what the Bootstrap site itself has.

In my case, the bootstrap minified CSS was causing the issue. To make bootstrap 3.0.2 responsive in IE8 (emulated using the F12 Developer Tools) I had to:

1 - Set the X-UA-Compatible flag.

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

2 - Use the non-minified bootstrap.css, instead of bootstrap.min.css

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - Add the respond.js (and html5shiv.js)

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

put respond.js at bottom of page but before closing body tag and here is link of respond.js and run this code in your localhost.

https://github.com/scottjehl/Respond