title: Bootstrap 3 + IE11 + HTML5 not working
body: <p>I have a problem with getting my page to display properly in ie11, in chrome it works perfectly but when I switch to IE11 it does not.</p>
  
  <p>In Chrome it is a responsive masonry grid and in IE it uses full width and stacks every article on top.</p>
  
  <p>I have tried html5shiv, respond.js modernizr, I tried wp_enqeueing it, tried including the scripts in the footer, header and also linked them through a cdn but also stored locally.</p>
  
  <p>What do I need to do?</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang=""&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;Freek Bellinga&lt;/title&gt;
          &lt;!-- Awesome Font --&gt;
          &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
          &lt;!-- Google fonts --&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Old+Standard+TT:400,700,400italic|Cookie' rel='stylesheet' type='text/css'&gt;
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;!-- Style CSS  --&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
          &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
          &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
          &lt;!--[if lt IE]&gt;
              &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
              &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
  
  
  &lt;nav class="navbar navbar-default navbar-static-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&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 class="navbar-brand website-title" href="#"&gt;Mijn Limericks&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse navbar-right" id="myNavbar"&gt;
        &lt;ul class="nav navbar-nav navbar-default"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Over Mij&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Categoriëen&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; 
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  
  
  
  
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
  
                 &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
        &lt;img src="img/stoel.jpg" class="img-responsive"&gt;
        &lt;h1&gt;Stoel&lt;/h1&gt;
        &lt;span&gt;16 maart, 2015&lt;/span&gt;
        &lt;p class="limerick-text"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="img/langejaap.jpg" class="img-responsive"&gt;
         &lt;h1&gt;Lange Jaap&lt;/h1&gt;
        &lt;span&gt;16 maart, 2015&lt;/span&gt;
        &lt;p class="limerick-text"&gt;een boegbeeld van ver waargenomen
          de Lange Jaap bij de stad mijner dromen
          het gevoel van geluk
          mijn dag kan niet meer stuk
          in de polder is het dubbel thuiskomen&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="img/zeester.jpg" class="img-responsive"&gt;
         &lt;h1&gt;Zee ster&lt;/h1&gt;
        &lt;span&gt;16 maart, 2015&lt;/span&gt;
        &lt;p class="limerick-text"&gt;een zeester verrast en verlegen
          heeft onverwacht bezoek gekregen
          zij bad stil en blij
          blijf voor altijd bij mij
          en durft zich haast niet te bewegen&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="img/zeegolf.jpg" class="img-responsive"&gt;
          &lt;h1&gt;Golf&lt;/h1&gt;
        &lt;span&gt;16 maart, 2015&lt;/span&gt;
        &lt;p class="limerick-text"&gt; een foto na uren verkregen
  machtige golf ,windkracht negen
  mijn dorp aan de zee
  sluit haar ogen in bée
  tsunami wendt tijdig haar steven&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="//placehold.it/430" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="//placehold.it/400" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="//placehold.it/490" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="//placehold.it/480" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
        &lt;img src="//placehold.it/530" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="//placehold.it/460" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="//placehold.it/430" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-6 text-center bg"&gt;
         &lt;img src="//placehold.it/400" class="img-responsive"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
          &lt;div class="container"&gt;
      &lt;hr&gt;
          &lt;div class="text-center center-block"&gt;
              &lt;p class="txt-railway"&gt;- Einde -&lt;/p&gt;
              &lt;br /&gt;
                  &lt;a href="https://www.facebook.com/bootsnipp"&gt;&lt;i id="social" class="fa fa-facebook-square fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="https://twitter.com/bootsnipp"&gt;&lt;i id="social" class="fa fa-twitter-square fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="https://plus.google.com/+Bootsnipp-page"&gt;&lt;i id="social" class="fa fa-google-plus-square fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="mailto:bootsnipp@gmail.com"&gt;&lt;i id="social" class="fa fa-envelope-square fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
      &lt;hr&gt;
  &lt;/div&gt;
  
  
          &lt;!-- jQuery --&gt;
          &lt;script src="//code.jquery.com/jquery.js"&gt;&lt;/script&gt;
          &lt;!-- Bootstrap JavaScript --&gt;
          &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  
  &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the css I am using:</p>
  
  <pre><code>body {
      background-color: #E1E3E4;
  }
  
  /* Setting default typography */
  h1,h2,h3,h4,h5,h6 {
      font-family: 'Noto Sans', sans-serif;
  }
  
  h1 {
      font-size: 17px;
      font-weight: bold;
      letter-spacing: .03em;
  }
  
  h2 {
      font-size: 27px;
      color:#4d4d4d;
  }
  
  h3 {
      color: #bebebe;
      font-size: 16,8px;
  }
  
  p {
      font-family: 'Noto Sans', sans-serif;
      font-size: 12px;
      color: #000;
      line-height: 1.5;
      padding-top:1%;
      letter-spacing: .06em;
  }
  
  a.website-title {
      font-family: 'Noto Sans', sans-serif;
      font-size: 18px;
      display: inline;
  }
  
  .article-date{
      font-family: 'Noto Sans', sans-serif;
      color: #00a0e9;
      font-size: 11px;
      font-weight: bold;
  }
  
  h1 &gt; a:link {
      text-decoration: none;
      color: #000;
  }
  
  h1 &gt; a:visited {
      text-decoration: none;
      color:#404237;
  }
  
  h1 &gt; a:hover {
      text-decoration: none;
       color:#404237;
       background-color: #00a0e9;
       color: #fff;
  }
  
  h1 &gt; a:active {
      text-decoration: underline;
  }
  
  /* End of default typography */
  
  /* Setting up div classes */
  
  .row.index-row {
   -moz-column-width: 20em;
   -webkit-column-width: 20em;
   -moz-column-gap: 10px;
   -webkit-column-gap:10px; 
  }
  
  .row &gt; .col-lg-3 {
   display: inline-block;
   padding: 0;
   margin: 10px;
   width:  96%; 
   float:none;
  }
  
  .limerick {
      background-color: #fff;
      -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  
  .article-content {
      padding: 1em .8571428571em .2857142857em;
  }
  
  .img-responsive {
      margin: 0 auto;
  }
  
  /* Styling for single.php */
  /* Typography single.php if needed */
  h1 {
  
  }
  
  h2 {
  
  }
  
  h3 {
  
  }
  
  p {
  
  }
  
  /* End of typography styling */
  
  /* Author post */
  
  
  /* Styling div elements for single.php */
  
  .row.single-php-row {
   -moz-column-width: 100%;
   -webkit-column-width: 100%;
   -moz-column-gap: 10px;
   -webkit-column-gap:10px; 
  }
  
  .limerick.single-php-img {
      width:50%;
  }
  
  
  
  
  
  /* End of styling div elements for single.php */
  </code></pre>