title: Bootstrap grid not working in IE 7 and 8
body: <p>I have a Bootstrap 3 grid aimed at working on desktop, mobile and tablet devices. Everything works fine on recent versions of Firefox and IE 9+, but it fails on anything less than IE 9. By fail I mean that the grid system displays the mobile version even on desktops.</p>
  
  <p>Scripts:</p>
  
  <pre><code>&lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="bootstrap/css/docs.min.css" rel="stylesheet"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><br/>
  My grid is as follows; I have removed a lot of the text from the divs for easy reading:</p>
  
  <p></p>
  
  <pre><code>    &lt;!--- BEGIN Mobile Navbar --&gt;
    &lt;header class="navbar navbar-static-top bs-docs-nav visible-xs" style="margin: -20px 0 15px 0;"&gt;
      &lt;div class="col-xs-12" id="nav-mobile-outer" style="padding-right: 0px;padding-left: 0px;"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
            &lt;a href="../" class="navbar-brand" id="nav-mobile-header"&gt;Menu&lt;/a&gt;
          &lt;/div&gt;
          &lt;nav class="collapse navbar-collapse bs-navbar-collapse" id="nav-mobile-inner" role="navigation"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;
                &lt;a href="#" id="nav-mobile-link"&gt;&lt;img src="images/arrow.gif" class="mobile-arrow"&gt;Orkney Demand &amp; Generation&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
      &lt;!--- END Mobile Navbar --&gt;
  
      &lt;div class="col-md-4 col-sm-6" id="header-left"&gt;&lt;/div&gt;
  
      &lt;div class="col-md-3 visible-md visible-lg" id="sse-logo"&gt;&lt;/div&gt;
  
      &lt;!--- Begin Desktop &amp; Tablet Navbar --&gt;
      &lt;nav class="col-md-4 col-sm-5 hidden-xs" id="nav-desktop-container"&gt;
      &lt;/nav&gt;
      &lt;!--- End Desktop &amp; Tablet Navbar --&gt;
  
      &lt;div class="col-xs-12" style="height:30px;"&gt;&lt;!--- Spacer --&gt;&lt;/div&gt;
  
      &lt;!--- Begin Desktop &amp; Tablet Mid Section --&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div class="col-md-4 col-sm-12" id="left-widget"&gt;
        &lt;/div&gt;
  
        &lt;div class="col-xs-12 col-sm-12 col-md-6" id="right-widget" style="margin-bottom: 20px;"&gt;&lt;/div&gt;
      &lt;!--- End Desktop &amp; Tablet Mid Section --&gt;
  
      &lt;div class="col-xs-12"&gt;&lt;!--- Spacer --&gt;&lt;br /&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p><br/>
  I have tried adding the following code to no avail:</p>
  
  <pre><code>&lt;!--[if lt IE 9]&gt;
      &lt;script src="bootstrap/respond/src/respond.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/html5shiv/src/html5shiv.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  </code></pre>