title: Square columns in bootstrap
body: <p>I'm trying to create a grid of squares to provide some navigation features. </p>
  
  <p>I have it working with js, but i don't like that solution. I'm working with bootstrap 3</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-4" style="background-color: lightgray"&gt;&lt;/div&gt;
      &lt;div class="col-xs-4" style="background-color: lightgreen"&gt;&lt;/div&gt;
      &lt;div class="col-xs-4" style="background-color: lightgray"&gt;&lt;/div&gt;
      &lt;div class="col-xs-4" style="background-color: lightgreen"&gt;&lt;/div&gt;
      &lt;div class="col-xs-4" style="background-color: lightgray"&gt;&lt;/div&gt;
      &lt;div class="col-xs-4" style="background-color: lightgreen"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  var divs = $(".row &gt; div");
  var width = divs.width();
  divs.height(width)
  </code></pre>
  
  <p>How can I achieve it only with css?</p>
  
  <p><a href="https://jsfiddle.net/rcfbr7q0/" rel="noreferrer">jsfiddle</a></p>